带有空格的 Vue js 对象属性不允许放置观察器

Question

我有一个表单数据对象，其属性称为"会计更改"。我能够在控制台中列出 formdata 对象属性并执行我需要的所有操作。但是，当我尝试在表单数据对象属性"表单数据.会计更改"上放置观察程序时，我收到以下错误：

[Vue 警告]：监视路径失败："formData.Accounting Change"观察程序仅接受简单的点分隔路径。要进行完全控制，请改用函数。 当我删除空格时，它按预期工作 表单数据.会计更改. 我需要一些想要保留该空间。在 Vue 中有什么方法可以做到这一点吗？

Answer 1

扩展我的评论：

你为什么需要这个空间？如果使用对象键作为名称 用户会看到，然后你可以做一些不同的事情，比如 将名称更改为Accounting_Changing并具有要替换的筛选器 带空格的下划线。

考虑一下：

new Vue({
data: {
formData: {
Accounting_Changing: {}
}
},
watch: { 
//Insert your watcher here
},
filters: {
removeUnderscore(name) {
return name.replace(/_/g, " ")
}
},
methods: { //you can make a method alternatively instead of the filters
removeUnderscore(name) {
return name.replace(/_/g, " ")
}
}
})
...
In your HTML you can remove the underscore from the key with this syntax 
{{ key | removeUnderscore }}

Or just use the method
{{ removeUnderscore(key) }}

希望这有所帮助。