v-for 子组件中的复选框值作为道具（对象数组）答案

【问题标题】：v-for checkbox value in child component as prop (array of objects)v-for 子组件中的复选框值作为道具（对象数组）
【发布时间】：2021-01-02 16:25:35
【问题描述】：

我有两个组件“父”和“子”。每个子组件都有带有 :checked 属性的复选框。在父组件中，我遍历对象数组并将道具传递给子组件。我可以将事件从子级发送回父级并在数组中重新分配新值，我看到更改但组件不会重新渲染。

我想要做的是获得某种无线电组行为，但在复选框内。单击一个复选框时，需要将其他复选框设置为 false。我可以清楚地看到数组已被修改，但组件不会重新渲染（

这里是沙盒链接 https://codesandbox.io/s/vue-starter-forked-jxgf9?fontsize=14&hidenavigation=1&theme=dark

父组件：

<template>
  <div>
    <Child
      v-for="l in list"
      :id="l.id"
      :key="l.id"
      :title="l.title"
      :checked="l.checked"
      @checked="handleUpdate"
    />
  </div>
</template>

<script>
import Child from "../components/Child.vue";

export default {
  name: "parent",
  components: {
    Child
  },
  data: () => ({
    list: [
      { title: "First", checked: false, id: "01" },
      { title: "Second", checked: false, id: "02" },
      { title: "Third", checked: false, id: "03" },
      { title: "Fourth", checked: false, id: "04" },
      { title: "Fifth", checked: false, id: "05" }
    ]
  }),
  methods: {
    handleUpdate(e) {
      const newArray = this.list.map(a => ({ ...a }));
      console.log(newArray);

      newArray.forEach(el => {
        if (el.id === e) {
          el.checked = true;
        } else {
          el.checked = false;
        }
      });

      this.list = [];
      this.list = newArray;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <input type="checkbox" :value="checked" @click="$emit('checked', id)">
  </div>
</template>


<script>
export default {
  name: "child",
  props: {
    title: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      required: true
    },
    id: {
      type: String,
      required: true
    }
  }
};
</script>

非常感谢任何帮助。我真的坚持这一点，我压力很大（

【问题讨论】：

标签： javascript vue.js checkbox nested-loops v-for

【解决方案1】：

来自MDN: Checkbox: Additional attributes，

Attribute        Description
checked          Boolean; if present, the checkbox is toggled on by default
indeterminate    A Boolean which, if present, indicates that the value of the checkbox is indeterminate rather than true or false
value            The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on

所以在您的代码中，child.vue 内的<input type="checkbox"> 的v-bind:value 不会切换复选框，它只会在提交表单时更改复选框的值。

来自Vue Guide:：如下：

v-model 内部使用不同的属性并发出不同的不同输入元素的事件：

text 和 textarea 元素使用 value 属性和输入事件；

复选框和单选按钮使用 checked 属性和 change 事件；

选择字段将值用作道具，将更改用作事件。

这就是v-model 的工作方式。

所以在 child.vue 中，使用：

<input type="checkbox" :checked="checked" @click="$emit('checked', id)">

Updated Code SandBox

【讨论】：

抱歉耽搁了。我已经用一些解释更新了我的帖子。我想要做的是获得像广播组一样的行为，但在一组复选框内。当某些复选框被选中时，其他复选框应该被取消选中。
检查答案中更新的CodeSandBox，修复绑定问题后，它可以按您的预期工作。

【解决方案2】：

您还可以通过使用带有 getter 和 setter 的计算来使 Child 组件与 v-model 一起使用。我分叉了你的沙箱并在这里做了一个例子：https://codesandbox.io/s/vue-starter-forked-weyzd。

【讨论】：