store
の値をinput
で変更したいのですが、変えようとするとstore
の値を直接書き換えることができないとエラーが返ってきます。(当たり前ですが。。)
もしinput
でstore
の値をv-modelの様に動的に変更したい場合はどの様な処理にすればよろしいですか?
#例
//test.vue <div>{{ this.$store.state.test.value }}</div> <input v-model="this.$store.state.test.value"></input>
//test.js export const state = () => ({ value: '' })
#試したこと
算出setter関数使用
#失敗理由
######結局参照元がstoreのstateだった為v-modelで直接値を書き換えていることになっていた
<template> <div> <div v-for="image in test"> <el-input type="text" v-model="image"></el-input> </div> </div> </template> <script> export default { computed: { test: { get() { return this.$store.state.test.value.filter(function (test) { if(test.type === 'hoge') { return test } }) }, set(newVal) { //storeのmutateでstate更新関数 this.$store.dispatch('creative/doUpdateValue', newVal) } } } } </script>
関数内部で変数を作りそこにpush
していく
###失敗理由
######pushで値を入れていったのだが、代入ではなく参照という形で追加されていた為
<template> <div> <div v-for="image in test"> <el-input type="text" v-model="image"></el-input> </div> </div> </template> <script> export default { computed: { test: { get() { let tests = [] return this.$store.state.test.value.filter(function (test) { if(test.type === 'hoge') { tests.push(test) return tests } }) }, set(newVal) { //storeのmutateでstate更新関数 this.$store.dispatch('creative/doUpdateValue', newVal) } } } } </script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。