javascript - Vue 数据更新渲染DOM的问题

问题描述

问 题

我在input[type=checkbox]上绑定了一个model，click触发一个ajax方法，现在想让失败时，把数据回滚并重新渲染checkbox，出现了一个困扰。

dom的代码

<input type="checkbox"
       v-model="m.status"
       :true-value="1"
       :false-value="0"
       @click="updateMessengerRight(m)">

---

方法

methods: {
  updateMessengerRight (m) {
    this.doUpdateRight(m.openid, m.status).then(rs => {
      if (rs.data.success) {
        this.$notify.show('操作成功')
      } else {
        m.status = (m.status === 1) ? 0 : 1
        this.$notify.alarm(rs.data.errmsg)
      }
    }).catch(err => {
      console.log(err)
      m.status = (m.status === 1) ? 0 : 1
      this.$notify.alarm('系统错误')
    })
  }
}

---

在返回失败或者catch里面希望重置m.status的值，但结果是，值是改变了，但dom未重新渲染，不知该如何操作。
谢谢~

解决方案

解决了，还是得靠自己啊。

之前用的是vue@2.1.6 +　vue-template-compiler@2.1.6
都升级到最新的 2.1.9 就没这个问题了
看来是vue旧版本的一个bug

这篇关于javascript - Vue 数据更新渲染DOM的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！