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",
}

我的问题是当我尝试使用＆＃39; v-model＆＃39; =＆GT; ＆＃39;课程培训＆＃39; ，整个页面编译错误。

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

所以不要在模板中使用 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

将Laravel Eloquent查询的allias用于具有空格的列，这样您就不必在前端代码中烦恼了，

在列中也有空间，实际上是一个糟糕的数据库设计，你最终会遇到非常复杂的问题..

如何在空间

2 个答案: