VueJS:检查财产是否具有其他财产的价值

时间:2016-04-15 17:34:30

标签: javascript arrays vue.js

我目前正在学习Javascript(VueJS)并更新了我现有的一款Laravel应用。到目前为止它运作良好。我仍然遇到麻烦:我有两个道具(例如prop1和prop2)并且想要以不同的方式呈现表中的条目,如果prop1中的值也出现在prop2中,意味着值在某处PROP2。看看这个示例代码:

<tr v-for="s in list">
    <td v-if="s.value1 is also present in prop2"><i class="fa fa-circle text-danger"></i></td>
    <td v-else><i class="fa fa-circle text-success"></i></td>
    <td>{{ s.value1 }}</td>
    <td>{{ s.value2 }}</td>
</tr>

是否有一个漂亮而短暂的&#34; vue-like&#34;这样做的方法?

2 个答案:

答案 0 :(得分:1)

您可以使用.some运算符检查另一个数组中是否存在值:

// Will return true if any items matches s.value1
prop2.some(function (item) {
    return item === s.value1
});

您可以将其作为方法或计算属性添加到Vue实例,例如:

var app = new Vue({
    el: "#vue",
    data: {
      prop2: []
    },
    methods: {
      checkProp2: function(val) {
        return prop2.some(function (item) {
          return item === val;
        })
      }
    }
})

然后你可以做类似的事情:

<tr v-for="s in list">
    <td v-if="checkProp2(s.value1)"><i class="fa fa-circle text-danger"></i></td>
    <td v-else><i class="fa fa-circle text-success"></i></td>
    <td>{{ s.value1 }}</td>
    <td>{{ s.value2 }}</td>
</tr>

答案 1 :(得分:0)

<td v-if="s.value1 === s.value2">