如何使用字符串作为 v-model 指令中的属性名称来访问 Vue 组件的数据属性？答案

【问题标题】：How can I access my Vue component's data property using a string as it's property name in a v-model directive?如何使用字符串作为 v-model 指令中的属性名称来访问 Vue 组件的数据属性？
【发布时间】：2019-12-26 01:44:48
【问题描述】：

通过使用命名属性的字符串，我可以使用括号表示法访问对象的属性。例如

const foo = {
 "bar[foobar]": "hello world"
}

foo["bar[foobar]"] // "hello world"

如何在 Vue SFC (Single File Component) 中执行相同的操作，其中我有一个名为 "bar[foobar]" 的数据属性，并希望将其绑定到输入值，并为 v-model 指令提供值 "bar[foobar]"？

<template>
 <input v-model="bar[foobar]" />
</template>
<script>
export default {
  name: 'MyComponent',
  data() {
    return {
     "bar[foobar]": "hello world"
    }
  }
}
</script>

我尝试像 v-model='{{ 'bar[foobar]' }}' 那样提供 v-model 指令，但这也不起作用，或者 v-model="this['bar[foobar]']"

【问题讨论】：

标签： javascript vue.js frontend v-model vue-directives

【解决方案1】：

理想情况下，您只需重命名数据属性，但如果不能，您可以通过$data 访问它：

<input v-model="$data['bar[foobar]']">

【讨论】：

谢谢！我想让 data 属性与验证错误时从Commercejs.com 返回的内容保持同步。因此，如果我想查看一个属性，我会使用字符串在实例上的监视对象中设置方法/函数属性名称吗？ watch: { "bar[foobar]": function(old, new) { } }
@john-raymon 您只能将简单的虚线路径与watch 一起使用。对于更复杂的事情，您需要手动调用$watch 方法。见vuejs.org/v2/api/#vm-watch