Vue.js showing div on input event deletes text from input

Question

I am struggling with the following, trying to get a div to show up underneath a text input after someone begins typing in the input:

https://jsfiddle.net/chadcf/3vjn71ap/

The template is:

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

With the following vue code:

new Vue({
  el: "#app",
  data() {
    return {
      show: false,
      localValue: null
    }
  },
  methods: {
    handleInput(e) {
      this.show = true;
    },
  }
});

When you run this, if you type a character in the text input, indeed the div underneath shows up. But in addition the character you just typed vanishes. After that first character though everything works fine.

I think what's going on here is that when the input starts and sets this.show = true, that's happening before the value actually updates. I think... And thus vue re-renders the input but with no value. But I'm not actually sure what to do to handle this properly...

Could you get a better understanding of the problem? Can not you make the message disappear if it does not have a character @chad? — Hamilton Gabriel
– Hamilton Gabriel, Commented Nov 10, 2018 at 2:08
If you want to make it a one liner code @input="(e) => (localValue = e.target.value, localValue ? show = true : show = false)" — Socrates Tuas
– Socrates Tuas, Commented Nov 10, 2018 at 6:33

Husam Elbashir · Accepted Answer · 2018-11-10 03:08:08Z

3

This is happening because localValue isn't being updated by your input. When you start typing show will be set to true, so Vue will update the DOM to show your hidden div. But since localValue is null when the DOM updates your input will be blank since its value is bound to localValue. You can verify this by making handleInput toggle show's value instead of setting it to true and you'll see that every time you type something in the input field the hidden div's visibility will be toggled when the DOM updates but the input will be cleared ..

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

So to solve this you'll have to make sure that localValue is being updated by your input. The easiest way is to use 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>

JSFiddle

Alternatively you can manually handle the input in your handleInput method and set localValue to the typed value like Austio mentioned in his answer.

answered Nov 10, 2018 at 3:08

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chad Over a year ago

Thanks, that helps explain it in a way I can understand!

Austio · Accepted Answer · 2018-11-10 02:28:51Z

1

Hey so you are pretty close on this thought wise. When you handle input yourself, you have to set the new value when you have new input. In your specific case localValue will always be null which is not what i think you want. I think you are wanting something more like this.

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

answered Nov 10, 2018 at 2:28

Austio

6,0951 gold badge23 silver badges35 bronze badges

1 Comment

Chad Over a year ago

Thanks! That does work, but I don't quite get why I need to do that... I think you're saying I'm essentially overriding the default vue input handling so I have to do the assignment myself, which makes sense, but then I don't get why after I type the fist character and it vanishes, I can then continue typing and things show up in the input just fine if that's the case...

Collectives™ on Stack Overflow

Vue.js showing div on input event deletes text from input

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related