入力データをオブジェクトプロパティにバインドする際に問題が発生しました。オブジェクトを反復処理してその属性から入力フィールドを生成していますが、v-modelを使用するとデータバインディングが機能しません。これが私のコードです（コンソールログは空のままです）：
<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>
ここでは機能しないためfields[key]、v-modelで使用する必要がvalueあり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>
こちらの作業デモをご覧ください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加