Vue.js在输入时显示div事件从输入中删除文本_Vue.js_Vuejs2_Vue Component

Vue.js在输入时显示div事件从输入中删除文本

vue.js vuejs2

Vue.js在输入时显示div事件从输入中删除文本,vue.js,vuejs2,vue-component,Vue.js,Vuejs2,Vue Component,我正在努力解决以下问题，试图在有人开始输入文本后，在文本输入下面显示一个div：模板为： <div id="app"> <input id="foo" name="foo" :value="localValue" type="text" placeholder="" autocomplete="off" @input="handleInput" > <div v-if

我正在努力解决以下问题，试图在有人开始输入文本后，在文本输入下面显示一个div：

模板为：

<div id="app">
  <input id="foo"
       name="foo"
       :value="localValue"
       type="text"
       placeholder=""
       autocomplete="off"
       @input="handleInput"
  >
  <div v-if="show">Testing</div>
</div>

运行此操作时，如果在文本输入中键入字符，下面的div确实会显示出来。但除此之外，你刚才键入的字符消失了。在第一个角色之后，尽管一切正常

我认为这里发生的是，当输入开始并设置this.show=true时，这是在值实际更新之前发生的。我想。。。因此，vue重新呈现输入，但没有值。但我不知道该怎么做才能正确处理这件事…

嘿，所以你在这方面的想法非常接近。当您自己处理输入时，必须在有新输入时设置新值。在您的特定情况下，

localValue

将始终为空，这不是我认为您想要的。我想你想要的是更像这样的东西

 methods: {
    handleInput(e) {
      this.localValue = e.target.value;
      this.show = true;
    },
  }

嘿，从思想上讲，你已经接近这个目标了。当您自己处理输入时，必须在有新输入时设置新值。在您的特定情况下，

localValue

将始终为空，这不是我认为您想要的。我想你想要的是更像这样的东西

 methods: {
    handleInput(e) {
      this.localValue = e.target.value;
      this.show = true;
    },
  }

这是因为您的输入没有更新

localValue

。当您开始键入时，

show

将设置为true，因此Vue将更新DOM以显示隐藏的div。但由于DOM更新时，

localValue

为空，您的输入将为空，因为其值绑定到

localValue

。您可以通过使

handleInput

切换

show

的值而不是将其设置为true来验证这一点，您将看到每次在输入字段中键入内容时，DOM更新时隐藏的div的可见性将被切换，但输入将被清除

 methods: {
    handleInput(e) {
      this.show = !this.show;
    },
  }

因此，要解决这个问题，您必须确保您的输入正在更新

localValue

。最简单的方法是使用

v-model

<div id="app">
  <input id="foo"
       name="foo"
       v-model="localValue"
       type="text"
       placeholder=""
       autocomplete="off"
       @input="handleInput"
  >
  <div v-if="show">Testing</div>
</div>


测试

或者，您可以手动处理

handleInput

方法中的输入，并将

localValue

设置为他在回答中提到的键入值。

发生这种情况是因为

localValue

没有被您的输入更新。当您开始键入时，

show