In a similar way to accessing an object's property using bracket notation with a string naming the property, here's an example:
const foo = {
"bar[foobar]": "hello world"
}
foo["bar[foobar]"] // "hello world"
How can I achieve the same in a Vue SFC (Single File Component), where there is a data property named "bar[foobar]" and it needs to be bound to an input element's value using the v-model directive?
<template>
<input v-model="bar[foobar]" />
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
"bar[foobar]": "hello world"
}
}
}
</script>
I attempted to use the v-model directive like this: v-model='{{ 'bar[foobar]' }}', but that didn't work. I also tried
v-model="this['bar[foobar]']"