Question

我目前正在学习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;这样做的方法？

Answer 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>

Answer 2

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

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

2 个答案: