v-model to a computed properties, when <input> on blur, the value is reset #3389
Description
view: http://e6oxptppb3.proxy.qqbrowser.cc/
Input.vue
<template>
<div class="form-group">
<label class="col-md-2 control-label">
{{label}} <template v-if="required"><span style="color:red">*</span></template>
</label>
<div class="col-md-8" v-if="type === 'text'">
<input :type="type" :maxlength="maxlength" :name="id" class="form-control" :id="id" v-model="formModel" :placeholder="label" />
</div>
</div>
</template>
<style>
</style>
<script>
export default{
props:{
id: String,
label: String,
type:{
type: String,
default: 'text'
},
},
computed:{
formModel: {
get(){
return this.form[this.id]
},
set(val){
this.update(val)
}
}
},
vuex: {
getters: {
form: function(state) {
return state.form
}
},
actions: {
update({dispatch, state}, val) {
dispatch('UPDATE_FORM', this.id, val)
}
}
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
form:{}
}
const mutations = {
UPDATE_FORM(state, id, value) {
state.form[id] = value
},
INIT_FORM(state, data) {
state.form = data
}
}
export default new Vuex.Store({
state,
mutations
})