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.set

---

vuex中表单处理使用v-model的时候会比较棘手。参考官方文档，有两种“迂回”的方法，帮助你达到v-model的效果。

表单处理