VueJS: проверить, имеет ли свойство значение из другого свойства

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> 

Есть ли хороший и короткий способ «vue-like»?

Answer 1

Вы можете использовать .some оператор, чтобы проверить, если значение присутствует в другом массиве:

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

Вы можете добавить его в свой Вью например, в качестве метода или вычисленной собственности, например, :

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