環境:
vue@2.6.14
vuex@3.6.2
<v-text-fileld v-model=$store.state.userData.nickname></v-text-field>
このように state をバインドすると値が入力するたびに stateが更新されるため、フォームが submit されようと cancel されようと関係なく submit 扱いになってしまう。
solution)
フォームで編集したいデータを値渡しで格納する state を作成する。
const state = {
userData: {nickname: '太郎', age: 20},
form: {} ＜＜＜＜ 値渡し格納用
}
const mutations = {
'SET_FORM_DATA'(state, payload) {
state.form = payload
}
}
let data = this.$store.state.userData
let temp = JSON.stringfy(data)
temp = JSON.parse(temp)
this.$store.commit('SET_FORM_DATA', temp)
<v-text-fileld v-model=$store.state.form.nickname></v-text-field>
ref:
