我如何使用字符串访问我的 Vue 组件的数据 属性,因为它是 v-model 指令中的 属性 名称?

How can I access my Vue component's data property using a string as it's property name in a v-model directive?

与我能够通过使用命名为 属性 的字符串使用方括号表示法访问对象的 属性 的方式相同。 例如

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

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

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

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

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

理想情况下,您只需重命名数据 属性,但如果您不能,则可以通过 $data:

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