我正在构建一个组件,该组件可用于设置各种 vuex 属性,具体取决于路由中传递的名称。这是它的幼稚要点:
<template>
<div>
<input v-model="this[$route.params.name]"/>
</div>
</template>
<script>
export default {
computed: {
foo: {
get(){ return this.$store.state.foo; },
set(value){ this.$store.commit('updateValue', {name:'foo', value}); }
},
bar: {
get(){ return this.$store.state.bar; },
set(value){ this.$store.commit('updateValue', {name:'bar', value}); }
},
}
}
</script>
请注意,我传递this[$route.params.name]
给v-model
, 以使其动态化。这适用于设置(组件加载正常),但是在尝试设置值时,我收到此错误:
Cannot set reactive property on undefined, null, or primitive value: null
我认为这是因为this
内部v-model
变得未定义(?)
我怎样才能使这项工作?
更新
我也很想知道为什么这不起作用(编译错误):
<template>
<div>
<input v-model="getComputed()"/>
</div>
</template>
<script>
export default {
computed: {
foo: {
get(){ return this.$store.state.foo; },
set(value){ this.$store.commit('updateValue', {name:'foo', value}); }
},
bar: {
get(){ return this.$store.state.bar; },
set(value){ this.$store.commit('updateValue', {name:'bar', value}); }
},
},
methods: {
getComputed(){
return this[this.$route.params.name]
}
}
}
</script>