Vue数组道具未正确传递到子组件

Question

我有一个父组件Shopping-List，将一个数组传递给子组件Shopping-List-Item。我试图让一个复选框将Shopping-List-Item添加到“已检查”数组中，但是在检查Shopping-List组件时，“ checked”数组仍然为空。检查购物清单项目本身时，“已检查”数组正确填充了购物清单项目（每个购物清单项目下的数组都填充有它自己的项目）。 “ filteredList”是一种填充Shopping-List-Item的方法，并且可以正确显示。

购物清单中的代码，用于填充购物清单项目的列表：

<shopping-list-item v-for="item in filteredList" :key="item.id" :item="item" :mode="listMode" :checked="checked"/>

购物清单项目中用于显示复选框的代码：

<input type="checkbox" name="itemCheckbox" value="item" :key="item.id" v-model="checked"/>

我在Shopping-List-Item中定义了道具：

props: ["item", "mode", "checked"]

购物清单组件具有在数据中定义的选中数组：

  data() {
    return {
      checked: []
    }
  }