Question

如何在检查该阵列中的多个复选框后禁用复选框数组？有没有办法在vuejs中这样做，或者我需要一个观察者呢？事实上，我试图观看＆＃39; ord.sauce＆＃39;但我无法让它发挥作用

这是组件

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
    }
})

由于您没有直接在主代码中使用输入，因此您需要通过/从中代理属性（可能为＆＃34;选择＆＃34;和＆＃34;取消选择＆＃34;并拥有＆＃34;禁用＆＃34;）

的属性

Answer 2

我在这里回答了一个非常类似的问题：

Vue.js limit selected checkboxes to 5

在您的情况下，由于您正在处理组件中的值，因此需要更多参与。很难说清楚您的确切需求，所以我会再多解一下您的问题。

检查两个vuej后禁用复选框

2 个答案: