Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

element-ui form 组件中v-model与vuex如何结合使用?

vuex文档中建议表单中v-model这样使用:

<input v-model="user">

computed: {
  user: {
    get () {
      return this.$store.state.obj.user
    },
    set (value) {
      this.$store.commit('updateUser, value)
    }
  }
}

但是:
element-ui如果要使用form组件的表单验证功能,表单v-model绑定的data必须写在一个对象里面,如下的formline,也就是说它只验证formline对象内部的属性值,以下element-ui文档的demo代码:

clipboard.png

vue无法把一个计算属性写在一个对象(比如formline)里面,即不可以使用如下这样的语法:

computed: {
   // 错误代码
  'formline.user': {
    get () {
      return this.$store.state.obj.user
    },
    set (value) {
      this.$store.commit('updateUser', value)
    }
  }
}

我现在的做法是每次set操作commit后往formline对象中添加对应的key&value,这样才可以使用element-ui的form验证功能,代码如下 :

computed: {
  'user': {
    get () {
      return this.$store.state.obj.user
    },
    set (value) {
      this.$store.commit('updateUser', value)
      // 添加如下:
      this.formline.user = value
    }
  }
}

但总感觉有点歪门邪道,不知道有其他更合理的解决方案?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

我的解决思路是从store拷贝一份数据给组件。
组件每次数据更新,又拷贝一份给store。这样,组件和store的数据就是同步的。

从store拷贝一份数据给组件

data:function (){
        return {
            form:_.cloneDeep(this.$store.state.picker.form),
        }
    }

然后监听数据的变化

watch:{


        form:{
            handler:function(a, b){
                console.log('改变了', a, b);
                console.log(a);
                this.$store.commit('picker/setForm', {
                    form:_.cloneDeep(a),
                });
            },
            deep:true
        },

    },

每次更新,都提交到store。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...