如何在空间中使用VueJS数据密钥

Question

我正在使用现有的数据库,每个表列都包含空格.作为VueJS api的结果,我得到了带有空格的数据键,如下所示:

data = {
Course Trained:"82",
Course trained 2:null,
Delivery Channel:"IA2DC1",
End Date:"2017-05-06",
Full Name:"9",
ID:"1",
Intervention:"IA2",
Number of sessions:"5",
Start Date:"2017-05-02",
Training Orginisation:"2",
}

我的问题是当我尝试使用'v-model'=>'Course Trained'时,整个页面编译错误.

我怎样才能在VueJS中处理这个空间？

PS.我无法删除空格来更改表列名称.因为它与许多关系和第三方应用程序相关联.

Answer 1

我不认为使用带空格的数据变量是一个好主意.它会让你的生活变得复杂.

但无论如何,您可以使用yourdata[key_name]如下方式访问/ v-model :

app = new Vue({
  el: "#app",
  data: {
    test: { //if not root
      'test name': "Cat in Boots"
    },
    'test 1': 'Snow White' // if root
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <h2>{{test['test name']}}</h2>
    <input v-model="test['test name']">
    <h2>{{$data['test 1']}}</h2>
    <input v-model="$data['test 1']">
</div>

编辑:

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

所以不要在模板中使用它,特别是v-model.

app = new Vue({
  el: "#app",
  data: {
    'test 1': 'Cat in Boots'
  }
})

a {
  color:red;
  font-weight:bold;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <h2>{{this['test 1']}}</h2>
    <input v-model="this['test 1']"> <a>If using `this`, you will find v-model not working as expected</a>
</div>