Question

请看下面的片段，有三个演示，前两个演示工作正常（V模型工作正常）。

但是对于最后一个，当您在<input>中输入内容时，您会看到this['test 1']不会更新。 <h2>Name:<span>{{this['test 1']}}</span></h2>始终是初始值。

似乎v-model绑定this['test 1']的一个克隆。我们必须使用$data['test 1']来解决这种情况。

有谁知道造成这些差异的原因是什么？

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/vue@2.5.16/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>

Answer 1

您无法在模板中使用this，因为它未引用模板中的组件，因此在这种情况下需要使用$data

Answer 2

根本原因是：

正如Vue的作者所说：这个将根据您所在的功能范围在已编译的模板中进行更改。

所以不要在模板中使用 this 。

检查Vue作者https://github.com/vuejs/vue/issues/8080

的反馈

您也可以在github查看指令＆gt; model.js的源代码。

v-model的这个['key']和$ data ['key']之间有什么区别？

2 个答案: