在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue中如果對input元素通過keydown控制元素的屬性變化,會出現(xiàn)不能輸入

vue中如果對input元素通過keydown控制元素的屬性變化,會出現(xiàn)不能輸入的情況

官方的回復就是屬性改變會整體元素render,并不是setAttribute 看來只能自己規(guī)避, 感謝各位的回答, 給+1
官方回復

大概猜到了, 是不是屬性的變化引起了render, vue內部render的邏輯會重新讀取props上的value進行重新渲染, 所以就出現(xiàn)了下面的情況. 請看過的vue源碼的大神給與回復確認, 3q.

演示

請問這是不是vue的bug?

瀏覽器: mac谷歌68
vue: 2.5.16 && 2.5.17

復現(xiàn)1

復現(xiàn)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;
    }
  }
})
回答
編輯回答
墨小羽

不是 keydown 的問題吧, value 根據 text 來變更, keydown 里面你需要變更 text

2017年6月26日 10:11
編輯回答
撿肥皂

你直接用 :value="text" 相當于單向綁定了, 每次 vue 重新 render 都會使 input 的重置為 text 的值, 也就是 'vue', 你的 keydown 里面對 hasWarning 進行了賦值操作, 這會觸發(fā) render, 所以 input 的值會變?yōu)?'vue'. 這點從你的第一個演示中也可以很好的理解, 你每隔一秒改一次 num, 觸發(fā)一次 render, 所以 input 的值每隔1秒都會再次重置為 vue.

2018年7月20日 10:25
編輯回答
溫衫

怎么判斷hasWarning屬性沒有變化的？

2018年7月15日 12:03
編輯回答
女流氓

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

我覺得你用:value只是把text變量的初始值賦值給了input, 但是input的值的改變并不會改變text變量，所以值一直沒有改變。
要想兩者統(tǒng)一還是得用v-model進行雙向綁定

如果不用雙向綁定就需要每次手動在keydown方法里修改this.text,會較麻煩。

2017年6月22日 06:18
編輯回答
忘了我

改成

keydown() {
      if (1 == 1) {
          this.hasWarning = true;
      }else {
          this.hasWarning = false;
      }
      
    }
2017年11月28日 12:51