vue使用计算属性的get,set实现双向绑定到VUEX 失效

页面:

<el-input v-model="cPlaceholder"></el-input>
computed:{
    cPlaceholder:{
      get(){
        return this.$store.state.currentInputFrom.placeholder
      },
      set(val){
        this.$store.commit('setPlaceholder', val)
      }
    }
}

VUEX:

state: {
    currentInputFrom:{
    }
},
mutations: {
    setPlaceholder(state, value){
      state.currentInputFrom.placeholder = value
    }
}

操作结果:
在页面这个输入框输入内容之后,VUE设置成功,但是页面上不显示
图片描述

补充一下
补充一个新的发现,用原生的input可以实现,我这个是用了ui库的input

阅读 5.7k
3 个回答
{
    state: {
        currentInputFrom:{
           placeholder: '', // !
        }
    },
    mutations: {
        setPlaceholder(state, value){
          state.currentInputFrom.placeholder = value
        }
    }
}

state 中需要给 placeholder 默认值,因为 vue 的响应式系统依赖于数据的初始化给每一个 key 赋值。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题