отключить флажок после проверки двух vuejs

Question

как я могу отключить массив флажка после проверки нескольких флажков из этого массива? Есть ли способ сделать это в vuejs или мне нужен наблюдатель для этого? На самом деле я пытался смотреть 'ord.sauce', но я не мог заставить его работать

это компонент

Vue.component('sauce-view', { 
props: ["sauce", "ord", "name"], 
template: ' 
    <div class=""> 
      <input type="checkbox" :name="name" :value="sauce.id" v-model="ord.sauce"> 
      {{sauce.name}} 
     <label > 
      <img :src="sauce.link" > 
     </label> 
    </div>', 
    }); 

Это HTML-

<table> 
<tr v-for="o in order" > 
     {{o.sauce}}  
    <td v-for="sauce in les_sauces" > 
     <sauce-view :sauce="sauce" :ord="o" :name="o.produit+o.num"> 
     </sauce-view> 
    </td> 
</tr></table> 

Answer 1

Я создал простую скрипку, который должен проиллюстрировать логику позади: https://jsfiddle.net/UDany/r9q4x85d/

Это будет разметка:

<div id="demo"> 
    <template v-for="(item, index) in itemlist"> 
    <label><input type="checkbox" :value="index" name="condiment" v-model="selectedItems" :disabled="selectedItems.length >= max && selectedItems.indexOf(index) == -1" /> {{item}}</label> 
    </template> 
    <div>{{selectedItems.join(', ')}}</div> 
</div>  

И ваш JS будет выглядеть следующим образом:

var demo = new Vue({ 
    el: '#demo', 
    data: { 
     selectedItems: [], 
     itemlist: [ 
       "Mayo", 
       "Ketchup", 
       "Mustard", 
       "Honey" 
     ], 
     max: 2 
    } 
}) 

Поскольку вы не используете вход непосредственно в основной код, вам необходимо проксировать свойства через/из него (возможно, события проводки для «select» и «unselec t "и имеет свойство для" disabled ")

Answer 2

I я ответил на вопрос, очень похожий на этот вопрос:

Vue.js limit selected checkboxes to 5

В вашей ситуации это немного больше связано с тем, что вы обрабатываете значение в компоненте. Трудно сказать ваши точные потребности, поэтому я проясню ваш вопрос еще немного.