Vue.js限制選擇複選框5

Question

我需要選擇複選框的次數限制爲5 我嘗試使用：禁止喜歡這裏：

<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/