Vue.js输入值仅在第一个char上被删除

Question

基于官方示例Custom Input Component示例:

HTML:

<div id="app" >
  <div :class="{'has-value' : hasValue}">
    <input type="text"
      ref="input"
      v-bind:value="value"
      @input="onInput" >
  </div>
</div>

JS:

new Vue({
  el: '#app',
  data: function() {
    return {
      hasValue: false
      }
  },
  props: ['value'],
  methods:{
  onInput: function(){
    val= this.$refs.input.value
      if(val && val.length > 0){
        this.hasValue = true
      } else {
        this.hasValue = false
      }
    }
  }
})

JS小提琴演奏

预期: 动态设置hasValue输入数据并将Css类绑定到此数据

意外: 只有在初始化并键入第一个字符后,才会从输入中删除键入的字符.按JS-Fiddle-> Run再次查看.

在第一个字符后,一切都按预期工作

如果我删除v-bind:value="value"或评论\\this.hasValue = true它按预期工作.对于自定义输入组件,建议使用绑定值prop.

这是为了什么？为什么？或者这是我应该报告的错误？

Answer 1

这是预期的行为:

• 当第一个字符被插入时,hasValue从改变false到true,使元件重新呈现
• 在重新渲染期间,Vue看到输入有一个值(您刚输入的字符),但是您绑定到它的属性(valueprop)是空的.
• 因此,Vue更新输入以匹配绑定的prop - 因此,它会清空输入.
• 之后,hasValue不再改变,因此没有重新渲染,因此,Vue不再重置输入字段的值.

那么如何解决这个问题呢？

首先,您必须了解Vue是数据驱动的 - 数据决定HTML,而不是相反.因此,如果您希望输入具有值,则必须在绑定到它的属性中反映该值.

如果您使用本地数据属性,这将是微不足道的:

https://jsfiddle.net/Linusborg/jwok2jsx/2/

但是既然你使用了道具,并且我假设你想继续使用道具,那么这种情况就会有所不同 - Vue遵循"数据向下 - 事件向上"的模式.你不能从孩子内部改变道具,你必须告诉你从中得到它的父母你想用事件改变它.改变它的责任将是父母的责任.以下是具有正确父子关系的示例:

https://jsfiddle.net/Linusborg/jwok2jsx/4/