nanisore oishisou

Webエンジニアあるまさんのゆるふわ奮闘記。

Vuex使った時にフォームのバインディングにv-model使うと怒られる問題の解決法

Vuex使った時にフォームのバインディングにv-model使うと怒られる問題の 最終的な私の答え。

eventでvalueとキーネームを飛ばして ミューテーションでキーネーム付け合わせて、 バーンて入れるだけ。

これならミューテーションにupdateHogeを入力項目ごとに書かなくて済む。

inputにはこれを書いて

:value="blogForm.title"
@input="updateBlogForm($event, 'title')"

inputのあるコンポーネントのmethodにはこれを書いて

updateBlogForm(e, key_name) {
    this.$store.commit('updateBlogFormValue', { value:e.target.value, key_name });
}

ストアにこれを書くだけ

updateBlogFormValue (state, { value, key_name }) {
    state.blogForm[key_name] = value;
},

思いついたときに感動した。


【キーワード】 Vuex form input v-model エラー mutation バインディングイデア