vue中如果对input元素通过keydown控制元素的属性变化,会出现不能输入的情况

官方的回复就是属性改变会整体元素render,并不是setAttribute 看来只能自己规避, 感谢各位的回答, 给+1
官方回复


大概猜到了, 是不是属性的变化引起了render, vue内部render的逻辑会重新读取props上的value进行重新渲染, 所以就出现了下面的情况. 请看过的vue源码的大神给与回复确认, 3q.

演示


请问这是不是vue的bug?

浏览器: mac谷歌68
vue: 2.5.16 && 2.5.17

复现1

复现2

代码:

<div id="app">
  <input :warning="hasWarning" :value="text" @keydown="keydown" />
</div>
new Vue({
  el: "#app",
  data: {
    text: 'vue',
    hasWarning: false
  },
  methods: {
      keydown() {
      if (1 == 1) {
          this.hasWarning = true;
      }
      this.hasWarning = false;
    }
  }
})
阅读 4k
5 个回答

你直接用 :value="text" 相当于单向绑定了, 每次 vue 重新 render 都会使 input 的重置为 text 的值, 也就是 'vue', 你的 keydown 里面对 hasWarning 进行了赋值操作, 这会触发 render, 所以 input 的值会变为 'vue'. 这点从你的第一个演示中也可以很好的理解, 你每隔一秒改一次 num, 触发一次 render, 所以 input 的值每隔1秒都会再次重置为 vue.

把:value="text"改为v-model="text"

我觉得你用:value只是把text变量的初始值赋值给了input, 但是input的值的改变并不会改变text变量,所以值一直没有改变。
要想两者统一还是得用v-model进行双向绑定

如果不用双向绑定就需要每次手动在keydown方法里修改this.text,会较麻烦。

不是 keydown 的问题吧, value 根据 text 来变更, keydown 里面你需要变更 text

怎么判断hasWarning属性没有变化的?

改成

keydown() {
      if (1 == 1) {
          this.hasWarning = true;
      }else {
          this.hasWarning = false;
      }
      
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题