In vue, if the attribute change of the element is controlled by keydown to the input element, there will be a situation that it cannot be entered.

the official reply is that the attribute change will lead to the overall element render , not setAttribute . Thank you for your answer. Give + 1
official reply

. < hr >

probably guessed , whether the property change caused the logic of the render inside the render, vue to re-read the value on the props for re-rendering, so the following situation occurred. Please reply and confirm if you have seen the vue source code, 3Q.

Demo

< hr >

is this the bug? of vue

browser: mac Google 68
vue: 2.5.16 & & 2.5.17

reproduce 1

reproduce 2

Code:

<div id="app">
  <input :warning="hasWarning" :value="text" @keydown="keydown" />
</div>

new Vue({
  el: "-sharpapp",
  data: {
    text: "vue",
    hasWarning: false
  },
  methods: {
      keydown() {
      if (1 == 1) {
          this.hasWarning = true;
      }
      this.hasWarning = false;
    }
  }
})

React.js javascript vue.js

Apr.06,2021

change: value= "text" to vMube model = "text"

I think you use: value just assigns the initial value of the text variable to input, but the change in the value of input does not change the text variable, so the value has not changed.
if you want to unify the two, you still have to use v-model for two-way binding

it will be troublesome to manually modify the this.text, in the keydown method every time without two-way binding.

you directly use : value= "text" is equivalent to one-way binding. Every time vue resets render, it will reset input to the value of text, that is, 'vue',' you have assigned hasWarning in your keydown, which will trigger render, so the value of input will become 'vue'.. This can also be well understood from your first demonstration. You change num, every second to trigger render, so every second the value of input will be reset to vue.

is not a problem with keydown. Value is changed according to text, and you need to change text

in keydown. How can you tell that the hasWarning attribute has not changed?

Change

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

Previous: Vscode formatted indentation

Next: How does Mini Program based on wepy clear the value of input in the bindblur event of input

Weird question: if the data requested by the vue backend is the same as the input content, the style is misplaced.
before requesting data, the style is normal. Take a closer look at 111l the underline that s strange. I really don t know how to start with this problem. I d like to ask all of you ...

Element-ui react.js javascript vue.js

Mar.07,2021
How to solve the problem that the table will not be re-rendered after the data of the Table component in elementUI changes?
the sortchange hook function is called when sorting, and then the initsort method is triggered. I wanted to keep the first row from moving up (forcing the sorted image to be updated without success), but the table data changed, but the page did not chan...

React.js javascript vue.js element-ui

Apr.03,2021