如何检查 v-model 对象值

Question

我是 vue 新手。我用的是vue^2.6.10，还有element-ui^2.12.0。这是我的 api 响应数据：

API 结果

[
    {
        name: 'Test',
        age: 18,
        cash: null,
    },
    {
        name: 'Test2',
        age: 28,
        cash: 1004,
    }
]

这是我的 table

<el-row class="el-row-margin">
    <el-table
    :data="personalData"
    border
    >

        <el-table-column
            v-slot="scope"
            fixed
            :label="$t('cash')"
        >
            <el-input v-model="scope.cash" /> <!-- How could I show cash as 0, when this value is nul -->
        </el-table-column>
    </el-table>
</el-row>

我如何检查 scope.cash is null 将显示 0。谢谢你的帮助。

Answer 1

将元素替换为 <el-input v-model="{{ scope.cash | formatValue }}" />

将其放在上面的脚本标记中 data

filters: {
  formatValue: formatValue (data) {
    return data?data:0
  }
},

您可以将此过滤器用于任意多个键 formatValue

Answer 2

您必须像这样使用 value 和 @input：

<el-input :value="scope.cash | formatValue" @input="scope.cash= $event"></el-input>

当然你必须像之前描述的那样编写你自己的过滤器：

filters: {
  formatValue: formatValue (data) {
    return data 
      ? data
      : 0
  }
},

如何检查 v-model 对象值

How to check v-model object value

vue.js

vuejs2

element-ui