Having an issue in Vue3 where I am unable to bind a nested property to v-model correctly.
Check out the source code below:
Template:
<div id="app">
<span>{{level1.level2.level3}}</span> <br/>
<span>{{level1['level2']['level3']}}</span> <br/>
<input v-model="level1.level2.level3" /> <br/>
<input v-model="level1.level2['level3']" /> <br/>
<input v-model="level1['level2']['level3']" />
</div>
JS
Vue.createApp({
data() {
return {
level1: {
level2: {
level3: "val"
}
}
}
},
methods: {}
}).mount("#app")
<input v-model="level1.level2.level3" /><input v-model="level1.level2['level3']" />but
<input v-model="level1['level2']['level3']" />The console warning displayed is
"[Vue warn]: Template compilation error: v-model value must be a valid JavaScript member expression.
Any ideas why level1['level2']['level3'] isn't binding to v-model correctly? To me, it seems like a valid js expression.
Here is the online fiddle for reference.