I am creating a versatile component that can update different vuex properties based on the route parameter passed. Below is a simplified version of the code:
<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>
Using this[$route.params.name] in the v-model makes the component dynamic and functional for setting values. However, an error occurs when trying to set a value:
Cannot set reactive property on undefined, null, or primitive value: nullIt seems that this inside the v-model becomes undefined. How can this issue be resolved?
UPDATE
I am also interested in understanding why this alternative approach results in a compilation error:
<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>