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

Question

The same way I'm able to access an object's property using bracket notation by utilizing a string naming the property. For example

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

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

How can I do the same in a Vue SFC (Single File Component) , where I have a data property named "bar[foobar]" and want to bind it to an input's value giving the v-model directive the value "bar[foobar]" ?

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

I tried providing the v-model directive as such v-model='{{ 'bar[foobar]' }}' but that didnt't work either, or v-model="this['bar[foobar]']"

Answer 1

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

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