admin管理员组文章数量:1317894
I'm having problems binding input data to object properties. I'm iterating through an object to generate input fields from its attributes, but the data binding won't work using v-model. Here's my code (the console log remains empty):
<div id="app">
<div v-for='value, key in fields'>
{{ key }}: <input v-model='value'>
</div>
<button @click="add">Add</button>
</div>
<script>
new Vue({
el: '#app',
data: {
fields: {
id: 123,
name: 'abc'
}
},
methods: {
add: function(){
console.log('id: ' + this.fields.id)
console.log('name: ' + this.fields.name)
}
}
})
</script>
I'm having problems binding input data to object properties. I'm iterating through an object to generate input fields from its attributes, but the data binding won't work using v-model. Here's my code (the console log remains empty):
<div id="app">
<div v-for='value, key in fields'>
{{ key }}: <input v-model='value'>
</div>
<button @click="add">Add</button>
</div>
<script>
new Vue({
el: '#app',
data: {
fields: {
id: 123,
name: 'abc'
}
},
methods: {
add: function(){
console.log('id: ' + this.fields.id)
console.log('name: ' + this.fields.name)
}
}
})
</script>
Share
Improve this question
asked Feb 15, 2017 at 10:48
daviddavid
431 silver badge4 bronze badges
1 Answer
Reset to default 11You will have to use fields[key]
with v-model as value
will not work there, it is an local variable of v-for
.
<div id="app">
<div v-for='(value, key) in fields'>
{{ key }}: <input v-model="fields[key]">
</div>
<button @click="add">Add</button>
</div>
See working demo here.
本文标签: javascriptVuejs twoway data binding using object with vforStack Overflow
版权声明:本文标题:javascript - Vue.js: two-way data binding using object with v-for - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742037841a2417399.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论