将多个子复选框绑定到一个父级

Posted 2023-02-23

【中文标题】将多个子复选框绑定到一个父级

【英文标题】：Binding multiple checkboxes of children to one parent

【发布时间】：2021-10-10 09:13:39

【问题描述】：

有没有办法将多个子级的多个复选框绑定到一个父级（例如通过模型）？

假设子组件有这样的东西：

<input
  type="checkbox"
  :id="'ticket-'+id"
  :checked="checked"
/>

现在，是否有可能有一个像 selected 这样的父属性，它将 id 作为值收集到所有子选中复选框的数组中？

  selected: [
    5,
    8
  ]

最接近我的解决方案的是this。但就我而言，我不想跟踪未检查的实例。

【问题讨论】：

你可以在父容器上监听change事件，如果偶数目标被选中则更新模型。

@abhishekkannojia 您能否提供一些您想到的解决方案的基本代码实现？

【参考方案1】：

您可以监听父级上的复选框change 事件并调用更新数据模型的方法。

看看下面演示这个的小提琴。 （打开整页才能正确查看）

new Vue(
  el: "#app",
  data: 
    list: [
     id: 1, label: 'Check 1',
     id: 2, label: 'Check 2',
     id: 3, label: 'Check 3',
     id: 4, label: 'Check 4',
    ],
    selected: []
  ,
  methods: 
    handleChange: function(ev) 
      let id = ev.target.id;
        if (ev.target.checked) 
        if (!this.selected.includes(id)) 
            this.selected.push(id);
        
       else 
        this.selected = this.selected.filter(function (item) 
            return item !== id;
        );
      
      
      console.log('Updated: ', this.selected);
    
  
)

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


#app 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;


li 
  margin: 8px 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app">
  <ol @change="handleChange">
    <li v-for="check in list">
      <label>
        <input type="checkbox" :id="check.id" />
        <span>check.label</span>
      </label>
    </li>
  </ol>
</div>

【讨论】：

这很好，但在我的情况下，复选框位于子组件中，而我要跟踪的选定记录数组应该位于父组件中，这是棘手的部分。如何将多个子项的多个复选框绑定到一个父项？

您可以使用带有 id 的子组件中的$emit()（如果选中）并在父组件上侦听，然后您可以更新状态。