Vue.js v-привязка к значению внутри массива

Question

Я только начинаю с Vue.js; впечатлен тем, что он может сделать, но испытывает трудности с анализом основ из документации.

Предполагая, что некоторые флажки или отборные [Несколько]:

<label><input v-model="fruits" type="checkbox" value="apple"> apple</label><br> 
<label><input v-model="fruits" type="checkbox" value="orange"> orange</label><br> 
<label><input v-model="fruits" type="checkbox" value="banana"> banana</label><br> 

привязанных к массиву в модели Vue:

var vm = new Vue({ 
    el: '#foo', 
    data: { 
     fruits: ['orange'], 
    }, 
}); 

Я хочу, чтобы манипулировать классы на некоторых других элементах на основе того, что находится или не находится в массиве vm.$data.fruits. Я не могу понять синтаксис для использования с v-bind:class для проверки внутри массива fruits. Я предполагаю, что это что-то вроде этого:

<div id="myfruits" v-bind:class="{ 'apple': fruits.apple, 'banana': fruits.banana, 'orange': fruits.orange }">fruits</div> 
<div id="apple" v-bind:class="{ 'banana': fruits.banana }">You've got bananas!</div> 

Я уверен, что должен быть способ сделать это inArray вид логики с v-bind. Если нет, могу ли я обратиться к методу вместо значения? Мне нравится v-bind:class="{ 'orange': hasOranges() }"?

Answer 1

Просто построить на ответ Линуса, есть несколько других способов справиться с этим.

Вы можете поставить галочку в вашем связывающим выражении:

<div id="apple" v-bind:class="{ 'banana': fruits.indexOf('banana') > -1 }">You've got bananas!</div> 

Если, как в одном из ваших примеров, имена классов соответствуют значениям плодовых, связанным с вашими флажками, вы можете связать непосредственно с fruits массива :

<div id="myfruits" v-bind:class="fruits">fruits</div> 

Или, если ваши имена классов отличаются от фруктов, вы можете привязать к расчетному собственности:

<div id="myfruits" v-bind:class="classes">fruits</div> 

new Vue({ 
    el: '#app', 
    data: { 
     fruits: ['orange'], 
    }, 
    computed: { 
     classes: function() { 
      return { 
      'has-banana': this.fruits.indexOf('banana') > -1, 
      'has-apple': this.fruits.indexOf('apple') > -1, 
      'has-orange': this.fruits.indexOf('orange') > -1 
      }; 
     } 
    } 
}) 

Answer 2

создать метод, который проверяет массив fruits с #indexOf(), который содержит фрукты.

var vm = new Vue({ 
 
    el: '#foo', 
 
    data: { 
 
     fruits: ['orange'], 
 
    }, 
 
    methods: { 
 
    hasFruit(fruit) { 
 
     return this.fruits.indexOf(fruit) === -1 ? false : true 
 
    } 
 
    } 
 
});

<div id="myfruits" v-bind:class="{ 'apple': hasFruit('apple'), 'banana': hasFruit('banana'), 'orange': hasFruit('orange') }"> 
 
    fruits 
 
</div>