Vue - 带有多个复选框的输入

Posted 2023-02-22

【中文标题】Vue - 带有多个复选框的输入

【英文标题】：Vue - input with multiple checkboxes

【发布时间】：2017-06-08 20:56:24

【问题描述】：

我正在渲染一些基于数组的复选框，并使用数据属性作为v-model。我正在使用 Vue2。

但是，由于某种原因，当v-model 的值等于 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"
  ,
// other values
]

屏幕截图（我添加了 item.category 和 category.id 作为标签文本以使其更清晰）：

【参考方案1】：

当您使用Multiple checkboxes 时，您必须在v-model 中提供一个数组，因此您的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]
      
    ;
  
)