vue.js - form使用vuex,焦点离开input,input里变为初始值
本文介绍了vue.js - form使用vuex,焦点离开input,input里变为初始值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
写的form组件,input标签输入完值后,失去焦点,input上显示的值变为初始值了,但是form对象里值已经设置上去了,使用的v-model方式。
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(){
console.log(this.form[this.id])
return this.form[this.id]
},
set(val){
this.update(val)
}
}
},
vuex: {
getters: {
form: state => 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
})
查看地址:http://e6oxptppb3.proxy.qqbro...
解决方案
受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除
因为 state.form
是一个对象,所以在 UPDATE_FORM 中通过 state.form[id] = value
改变state.form
的时候,vue 监测不到变化
解决办法:
state.form[id] = value;
state.form = Object.assign({}, state.form); // 增加这一句
在线预览:
http://jsbin.com/xogalo/edit?...
这篇关于vue.js - form使用vuex,焦点离开input,input里变为初始值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文