如何检查 v-model 对象值答案

【问题标题】：How to check v-model object value如何检查 v-model 对象值
【发布时间】：2019-12-05 09:33:19
【问题描述】：

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

API 结果

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

这是我的桌子

<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 是否为 null 将显示 0。谢谢您的帮助。

【问题讨论】：

标签： vue.js vuejs2 element-ui

【解决方案1】：

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

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

当然，你必须编写自己的过滤器，如前所述：

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

【讨论】：

【解决方案2】：

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

把它放在data上方的脚本标签中

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

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

【讨论】：

2.6.10 不支持带过滤器的 v-model