如何在 space 中使用 VueJS 数据密钥

Question

我正在使用现有的数据库，其中每个 table 列都包含白色 space。作为 VueJS api 的结果，我得到了带有 white-space 的数据键，如下所示：

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 中使用-space 处理这个问题？

PS。我无法删除 space 来更改 table 列名称。因为它链接到许多关系和第 3 方应用程序。

Answer 1

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

但无论如何，您可以 access/v-model 使用 yourdata[key_name] 如下所示：

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 的作者所说：this 将根据您所在的功能范围在编译模板中进行更改。

所以不要在模板中使用this，尤其是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

对具有 space 的列使用 Laravel Eloquent 查询的别名，因此您不必费心在前端代码中，

还有 space 列，这确实是一个糟糕的数据库设计，你最终会遇到非常复杂的问题..

如何在 space 中使用 VueJS 数据密钥

How to use VueJS data key with space

laravel

vue.js

vue-router

vue-component