Vue的 - 與多個複選框

Question

我渲染基於陣列上一些複選框和使用數據屬性作爲V模型的輸入。我正在使用Vue2。

但是，我最終因爲某種原因檢查了所有的複選框，當v模型的值等於1（我想它把它看作是一個布爾而不是數字）。

我試圖V-model.number - 沒有任何的運氣。我究竟做錯了什麼？

我的模板：

<div v-for="category in categories">  
    <input type="checkbox" v-model.number="item.category" :id="'category_' + category.id" :value="category.id" @change="save"/> 
    <label>{{ item.category }} : {{ category.id }}</label> 
</div> 

模型數據（item.category）：

1 

分類：

[ 
    { 
    "id": 2, 
    "name": "news Category 0" 
    }, 
    { 
    "id": 7, 
    "name": "news Category 1" 
    }, 
    { 
    "id": 12, 
    "name": "news Category 2" 
    }, 
    { 
    "id": 17, 
    "name": "news Category 3" 
    }, 
    { 
    "id": 22, 
    "name": "news Category 4" 
    }, 
    { 
    "id": 27, 
    "name": "news Category 5" 
    }, 
    { 
    "id": 32, 
    "name": "news Category 6" 
    }, 
    { 
    "id": 37, 
    "name": "news Category 7" 
    }, 
    { 
    "id": 42, 
    "name": "news Category 8" 
    }, 
    { 
    "id": 47, 
    "name": "news Category 9" 
    }, 
    { 
    "id": 52, 
    "name": "news Category 0" 
    }, 
    { 
    "id": 57, 
    "name": "news Category 1" 
    }, 
    { 
    "id": 62, 
    "name": "news Category 2" 
    }, 
    { 
    "id": 67, 
    "name": "news Category 3" 
    }, 
    { 
    "id": 72, 
    "name": "news Category 4" 
    }, 
    { 
    "id": 77, 
    "name": "news Category 5" 
    }, 
    { 
    "id": 82, 
    "name": "news Category 6" 
    }, 
    { 
    "id": 87, 
    "name": "news Category 7" 
    }, 
    { 
    "id": 92, 
    "name": "news Category 8" 
    }, 
    { 
    "id": 97, 
    "name": "news Category 9" 
    } 
] 

截圖（IVE添加item.category和category.id爲標籤文本以使其更清晰）：

Answer 1

當您使用Multiple checkboxes，你必須給在V型的陣列，所以你的item.category必須是一個數組：[1]。

見工作小提琴：https://jsfiddle.net/mimani/y36f3cbm/

var demo = new Vue({ 
    el: '#demo', 
    data() { 
    return { 
     categories: [{ 
     "id": 2, 
     "name": "news Category 0" 
     }, { 
     "id": 92, 
     "name": "news Category 8" 
     }, { 
     "id": 97, 
     "name": "news Category 9" 
     }], 
     item: { 
     category: [1] 
     } 
    }; 
    } 
})