如何使用带空格的 VueJS 数据键答案

【问题标题】：How to use VueJS data key with space如何使用带空格的 VueJS 数据键
【发布时间】：2018-10-05 00:46:33
【问题描述】：

我正在使用现有数据库，其中每个表列都包含空格。作为 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。我无法删除空格来更改表列名称。因为它链接到许多关系和第 3 方应用程序。

【问题讨论】：

是的，键的空格是我的问题。例如，我想通过 v-model 访问键名：Course Trained。整个页面会编译错误。

标签： laravel vue.js vue-component vue-router

【解决方案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会根据你所在的函数作用域在编译的模板中发生变化。

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

【讨论】：

是的，+1，如果 'test name' 在根目录中，则 OP 也可以使用 <input v-model="$data['test name']">（尽管最好像在此演示中那样将其嵌套在属性中)。
感谢您的建议，更新了我的答案。其实我在尝试v-model="this['test name']"，但是会导致数据无法获取更新。我在谷歌上搜索它，但没有找到有用的信息。你知道$data['test 1'] 和this['test 1'] 有什么区别吗？可能需要查看 vue 源代码才能了解如何实现 v-model。
我认为我们可以像this.test一样访问方法或计算中的数据，这就是为什么我首先想到的是使用this['test']。如果将<h2>{{$data['test 1']}}</h2> 更改为<input v-model="this['test 1']">，似乎可行，但实际上如果更改输入的值，它不会得到更新。似乎输入绑定了一个值，它是来自$data['test 1'] 的一个克隆
非常感谢。我的问题解决了。 $data['test 1'] 和 this['test 1'] 都为我工作。
@LimSocheat 检查此don't use this in template

【解决方案2】：

使用别名和 Laravel Eloquent 查询有空格的列，这样你就不必在前端代码中费心了，

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

【讨论】：

非常感谢，这可能是可选的方法，因为有数千个表列，我无法为每一列保留别名。因为我正在研究由其他人设计的现有数据库，所以我无法对列名进行任何更改。