我如何使用字符串访问我的 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]']">
与我能够通过使用命名为 属性 的字符串使用方括号表示法访问对象的 属性 的方式相同。 例如
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]']">