Vue js - 如何使用子组件的 v-model 附加数组数据类型

Question

问题描述

我正在尝试模块化我的项目，并想知道如何在父组件中附加数组数据类型，在复选框子组件中使用 v-model。

预期行为

当前行为

家长

<template>
    <h1> {{gameModes}}</h1>
    <Child v-for="(value, index) in gameModesNames"  
                v-bind:key="index"  
                :name="value"
                v-model="gameModes[index]"
                />
</template>

<script>
import Child from './Child.vue';

export default {

    component: { Child },
    data() {
        gameModes: [],
        gameModeNames: ["bullet" ,"blitz" , "rapid"]
    }
}
</script>

孩子

<template>
    <div>
        <input type="checkbox" :id="name" :value="name" 
           @input="$emit('input', $event.target.value)"/>
        <label :for="name">{{name}}</label>
    </div>
</template>

<script>
import Child from './Child.vue';

export default {

    props: {
      name: String
    },
    data() {}
}
</script>

---

我尝试过的事情

我已经彻底阅读了关于这个问题的 Vue 文档，但我似乎无法让它发挥作用。我已经阅读了关于这个 SO 的帖子，其中几乎所有解决方案都具有相同的格式，其中 v-model 变量与 value 变量相同，在我的情况下，它必须是它自己附加的数组。

我进一步尝试将v-model 修改为v-model:"value"、v-model:"name" 和v-model:"gameModesNames"，但没有任何效果。

有人知道如何实现我想要实现的目标吗？

Answer 1

在父组件中，您需要捕获正在发出的事件 (@input) 并随后触发一个方法。所以 @input="doThis(indexOrEvent)" 在 doThis 中你将元素推送到数组中。

我也认为正确的事件应该是@clicked，但我不确定，所以我不想就这个话题发表强烈的意见