如何将VueJS数据密钥与空格配合使用 [英] How to use VueJS data key with space

问题描述

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

I am working with existed Database which every table columns are containing white space. As result as VueJS api, I got the data key with white-space as below:

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'时，整个页面都编译了一个错误.

My problem is when I tried to use 'v-model' => 'Course Trained', the whole page compiled an error.

如何在VueJS中处理带空格的内容?

How can I deal with this with-space in VueJS?

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

PS. I cannot remove space to change the table column name. because it linked to many relationship and 3rd party application.

推荐答案

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

I don't think it is a good idea using data variable with spaces. It will make you life complicated.

但是无论如何，您可以使用yourdata[key_name]对其进行访问/v建模，如下所示:

But anyway, you can access/v-model it using yourdata[key_name] like below:

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的作者说过:此将根据您所使用的功能范围在已编译的模板中进行更改.

As the author of Vue said: this will be changed in the compiled template depending on the function scope you are in.

因此请勿在模板中使用 this ，尤其是v-model.

So don't use this in the template, especially 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>

这篇关于如何将VueJS数据密钥与空格配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！