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

Question

官方的回复就是属性改变会整体元素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;
    }
  }
})

Answer 1

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

改成

keydown() {
      if (1 == 1) {
          this.hasWarning = true;
      }else {
          this.hasWarning = false;
      }
      
    }