javascript - VueJS:如何在数组的 for 循环中使用绑定值?
问题描述
我有一个字符串数组:
myList: ['First item', 'Second item']
我想添加第三个,甚至更多。我有一个将空字符串推送到数组的方法:
this.myList.push('')
现在看起来像这样:
['First item', 'Second item', '']
我现在可以编辑。但是,它没有绑定到数组。添加另一个项目时,该值将丢失并返回一个空字符串。
var app = new Vue({
el: '#app',
data: function() {
return {
myList: ['First item', 'Second item']
}
},
methods: {
remove(index) {
Vue.delete(this.myList, index)
},
add() {
this.myList.push('')
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
<input
type="text"
:value="listItem"
:key="index"
/>
<button @click.prevent="remove(index)">✕</button>
</p>
<p>
<button @click.prevent="add()">Add</button>
</p>
</div>
尝试了以下方法:
如上:
<input
type="text"
:value="listItem"
:key="index"
/>
没有钥匙,同样:
<input
type="text"
:value="listItem"
/>
使用(不正确的)绑定,不回显值:
<input
type="text"
:value="myList[index]"
/>
使用v-bind
:
<input
type="text"
v-bind:value="listItem"
/>
还有一把钥匙:
<input
type="text"
v-bind:value="listItem"
v-bind:key="index"
/>
我很肯定我会以错误的方式解决这个问题。希望你能看到我试图达到的行为。
更新刚刚尝试使用 a v-model
,但我收到此错误:
您将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组,因为写入别名就像修改函数局部变量一样。考虑使用对象数组并在对象属性上使用 v-model 。
拥有一个具有一个值的对象数组可能更容易吗?
解决方案
您应该使用 v-model 对您的输入进行 2 路绑定,并且您必须使用 myList[index] 因为 v-bind 指令需要属性值而不是 v-for 别名(如 listItem)。尝试这个:
var app = new Vue({
el: '#app',
data: function() {
return {
myList: ['First item', 'Second item']
}
},
methods: {
remove(index) {
Vue.delete(this.myList, index)
},
add(listItem) {
this.myList.push('')
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
{{myList[index]}}
<input
type="text"
v-model="myList[index]"
/>
<button @click.prevent="remove(index)">✕</button>
</p>
<p>
<button @click.prevent="add()">Add</button>
</p>
</div>
推荐阅读
- unity3d - 如何改变偏航角/将全局 eulerAngles 放入本地空间
- python - 如何制作神经网络keras的复杂输出
- ember.js - 如何在 Ember 集成测试中设置 ember-intl 服务?
- content-management-system - Magnolia 自动发布
- javascript - 如何使用 Ajax 调用从 MySql 中拆分最大数组?
- proxy - 快照代理不起作用
- machine-learning - 如何识别归一化特征
- kubernetes - Helm 将 YAML 文件导出到本地(只使用模板引擎,不要发送到 Kubernetes)
- php - Wordpress 格式 meta_value 列以仅获取选项值
- php - Laravel 会话表总是保存一行