javascript - Vue.js 复选框组件多实例

Question

我有一个使用复选框的过滤器列表。我试图让每个复选框都是自己的组件。所以我遍历我的过滤器列表，为每个过滤器添加一个复选框组件。 Vue.js documentation说如果我有多个使用相同模型的复选框，则该数组将使用复选框的值进行更新。如果复选框组是父组件的一部分，我会看到它有效。但是，如果我将复选框设为组件并在循环中添加每个复选框组件，则模型不会按预期更新。

我怎样才能拥有更新父级数组的复选框组件？我知道我可以通过为更新数组的组件上的方法发出一个事件来做到这一点，但 Vue 文档使框架看起来像是为你做了这件事。

这是我一直在研究的代码示例 https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3

Answer 1

这是一个工作版本。

<template>
  <div class="filter-wrapper">
    <input type="checkbox" v-model="internalValue" :value="value">
    <label>{{label}}</label>
  </div>
</template>

<script>
  export default {
    props: ['checked','value', 'label'],
    model: {
      prop: "checked"
    },
    computed:{
      internalValue: {
        get(){return this.checked},
        set(v){this.$emit("input", v) }
      }
    }
  }
</script>

已更新 bin .