如何将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'=>'课程训练'时，整个页面汇总了一个错误。

我该如何处理Vuejs中的空间？

ps。我无法删除空间以更改表列名称。因为它与许多关系和第三方申请有关。

Answer 1

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

但是，无论如何，您可以使用yourdata[key_name]访问/V模型，如下：

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>

Answer 2

使用Allias与Laravel雄辩的查询具有空间，因此您必须在前端代码中打扰

也有列中的空间，确实是一个糟糕的数据库设计，您最终会出现非常复杂的问题。