我正在尝试构建一个简单的 Vue.js SPA，它使用户能够在 v-for 循环中呈现各个输入字段中的输入值。到目前为止，我已经将我的实例设置为将一些硬编码值返回到循环中的输入字段（项目：[{ name: 'John' },{ name: 'James' }]），但我想动态输入附加值并使这些值呈现在新的单个输入字段中。我试图通过添加一个函数来实现这一点，该函数将我输入的值推送到项目数组中，但我没有生成带有值的新输入字段，我只得到空输入字段。问题是我不确定如何将我的新值分配给数组内的“名称：”，以便将它们分配到各个输入字段中。有关如何解决此问题的任何建议？请参阅下面的我的代码。谢谢！
<template>
<div id="app">
<input v-model="newInput"/>
<button @click="addItem()">add</button>
<div v-for="list in item">
<input type="text" v-model="list.name" />
{{list.name}}
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
newInput: '',
item: [{ name: 'John' },{ name: 'James' }]
}
},
methods: {
addItem() {
this.item.push(this.newInput);
}
}
}
</script>
在addItem方法中，一个字符串 ( this.newInput) 被推送到数组中。您应该推送对象而不是像数组中的其他对象一样结构化：
addItem() {
this.item.push({ name: this.newInput });
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句