Vue JS 自定义组件 v-model答案

【问题标题】：Vue JS custom component v-modelVue JS 自定义组件 v-model
【发布时间】：2017-11-07 08:15:19
【问题描述】：

大家好，我在尝试让v-model 处理我创建的自定义组件时遇到了一些问题。问题是这个组件由两个输入组成，每次更改这些输入时，我都会发出 "input" 事件并将其绑定到我在父级上拥有的数组。

<key-value-input v-for="n in inputs" v-model="provider.params"></key-value-input>

然后在组件本身...

        updateData() {
            this.$emit('input', {
                key: this.inputData.key,
                value: this.inputData.value
            })
        }

这有点奏效，问题在于它将 原始空数组 中的provider.params 替换为仅包含我可能拥有的几个键值组合之一的对象因为这个组件可以在运行时复制...

所以问题是，我如何做到这一点，以便 v-model 可以从每个子组件中获取数据并简单地将其设置为父级数组中的对象？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

如果我理解正确，您可以简单地在数组元素本身上使用v-model：

<key-value-input v-for="n in inputs" v-model="provider.params[n-1]"></key-value-input>

这是 JSFiddle：https://jsfiddle.net/2be4maxm/

【讨论】：

:value 在你的组件模板中比v-model="inputData.key" 更合适，因为你有一个单独的处理程序来发出发射。 This updated fiddle 展示了如何使用 v-model。
@RoyJ 啊，当然，这只是一个基于描述的快速模型，以一种特别的方式拼凑在一起，但是是的，:value 会更好。 ;)