H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue watch不到computed属性的变化?

computed计算来自store的数据,返回给模板调用,模板中使用v-model双向绑定数据,当改变界面上数据时,deep watch该数据并不成功。

数据计算和watch:
clipboard.png

模板使用:
clipboard.png

回答:

先说解决方法: 把watch的timeConfig改成'$store.state.widgetConfig'.


因为你computed的时候调用了getDefaultTime, vue调用这个function添加依赖失败了.


顺带提一下, computed绑定v-model是错误的行为, v-model等同于@input='e => timeConfig = e.target.value', 也就是等于你在代码中改变了computed的值和vuex里的值.
坏处是引起抖动.
解决方案是使用get, set方法: 类似于:

{
    computed: {
        timeConfig: {
            get () {
                return getDefaultTime(this.$store.data)
            },
            set () {
                this.$store.commit('mutation')
            }
        }
    }

回答:

你的这个我觉得应该可以给InputNumber 设置一个@change事件,然后将改变的方法放在methods里边,从而改变store的值,第一次加载的时候可以通过computed拿到store 的值,就不设置侦听器了

回答:

watch监听vuex和<input>双向绑定的数据都可以监听成功,你那个对应的return getDefaultTime(widgetConfig.timeType,widgetConfig.timeType)中的getDefaultTime函数是返回的对象吗

回答:

计算属性如果要修改他的值,需要为它增加set方法,上面没有set方法,v-model不能修改它的值,值不会改变,自然watch不到,https://cn.vuejs.org/v2/api/#…

本文地址:H5W3 » vue watch不到computed属性的变化?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址