CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Opass
Opass

Reputation: 79

Vue3 v-model bind nested data property with bracket access fails

I am using Vue3 and facing problem that I cannot bind nested property to v-model correctly.

Here is source code:

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" /> bind works

<input v-model="level1.level2['level3']" /> bind works

but <input v-model="level1['level2']['level3']" /> bind fails

The console warning said

"[Vue warn]: Template compilation error: v-model value must be a valid JavaScript member expression.

What's the reason level1['level2']['level3'] not binding to v-model correctly? I think it's a valid js expression.

Here is online fiddle

Upvotes: 1

Views: 1515

Answers (1)

futur
futur

Reputation: 1843

It looks like this is an issue with Vue itself, not with your code. It also seems that this issue has been fixed in a commit just over a week ago.

So if you're on Vue <=3.1.1 (a.k.a any version but the current GitHub master branch), your only real solution here would be to rework how you access properties, wait for a Vue update, or depend directly on the GitHub repository's master branch (not a great idea in general, so only do this if you need this notation and you need it right now).

Upvotes: 1

Related Questions