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

Question

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

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

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

如何在 Vue SFC（单文件组件）中执行相同操作，其中我有一个名为的数据属性"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 指令，v-model='{{ 'bar[foobar]' }}'但这也不起作用，或者v-model="this['bar[foobar]']"

Answer 1

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

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