javascript - Vue.js 将选中的复选框限制为 5

Question

我需要将所选复选框的数量限制为 5 个。我尝试像这里一样使用 :disabled:

    <ul>
        <li v-for="item in providers">
            <input type="checkbox" 
               value="{{item.id}}" 
               id="{{item.id}}" 
               v-model="selected_providers" 
               :disabled="limit_reached" 
            >
        </li>
    </ul>

然后:

new Vue({
    el: '#app',
    computed:{
        limit_reached: function(){
            if(this.selected_providers.length > 5){
                return true;
            }
            return false;
        }
    }
})

这种方法可行，但当它达到 5 时，所有复选框都被禁用，您无法取消选中不需要的复选框。

我还尝试以 1 毫秒的超时时间拼接数组，这有效但感觉很老套。有没有人可以推荐一下？

Answer 1

基本上，只有当输入尚未被选中并且有超过 4 个被选中时，您才会禁用输入。

我能想到的最干净的方法是:

new Vue({
  el: '#app',
  data: {
    inputs: []
  }
})

与:

<ul>
  <li v-for="n in 10">
    <label>
      <input
        type="checkbox"
        v-model="inputs"
        :value="n"
        :disabled="inputs.length > 4 && inputs.indexOf(n) === -1" 
        number> Item {{ n }} {{ inputs.indexOf(n) }}
    </label>
  </li>
</ul>

这是一个快速演示:https://jsfiddle.net/crswll/axemcp8d/1/