Take a look at the snippet below, which includes three demos. The first two demos are functioning correctly (v-model is working fine).
However, in the last demo, when you type something into the <input>, you will notice that this['test 1'] does not get updated. The value of
<h2>Name:<span>{{this['test 1']}}</span></h2>It appears that v-model binds a clone to this['test 1']. In this scenario, we need to use $data['test 1'].
Does anyone know what is causing these differences?
app = new Vue({
el: "#app",
data () {
return {
'test': "Cat in Boots",
'test 1': 'Snow White'
}
},
methods: {
testCase1: function(){
this['test'] = 'I am Cat in Boots' //works
this['test 1'] = 'I am Cat in Boots' //works
}
}
})span {
background-color:green
}
a {
color:red
}<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4828191b4c6dac1dac5c2">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<button @click="testCase1()">Test Case 1</button>It will change the data successfully.
<h2>Name:<span>{{test}}</span></h2>
<input v-model="test">
<h2>Name:<span>{{$data['test 1']}}</span></h2>
<input v-model="$data['test 1']">
<h2>Name:<span>{{this['test 1']}}</span></h2>
<input v-model="this['test 1']"><a>Type something in this input, the name will not be changed.</a>
</div>