检查两个vue.js后禁用复选框

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”和“ unselect”关联事件，并为“ disabled”设置一个属性）