set value of input programatically doesn't refresh component DOM

Question

I have an input which is bidden to property message. I have a set button , which I use for changing of input value programmatically. When the button is pressed, value of input is correctly changed to 'xxxx'. when I press clean button after that , the input is correctly cleaned but when I repeat pressing set and clean again the input does not get cleared anymore.

Working example is here:

https://codepen.io/dan-ouek/pen/rNBjxRO

<div class="container">
  <div id='root' class="box">
    <input ref="templateFilter" type='text' id='input' v-model='message'>
    {{ message }}
    <button @click="set">set</button>
    <button @click="clean">clean</button>
  </div>
</div>

new Vue({
  el: '#root',
  data: {
    message: 'Hello Vue'
  },
  methods: {
    set: function () {
       let element = this.$refs.templateFilter
       Vue.set(element, 'value', 'xxxx')
  }, clean: function () {
      this.message = ""
  }
}})

Questions:

1) Is it possible to change input programmatically without working with bidden property value? Something like direct DOM manipulation:

let element = document.getElementsByClassName("templateFilter")[0]
element.value = 'xxxxx'

but with proper component refresh?

2) Why is the {{ message }} not refreshed after calling set method?

why not just this.message = "xxxx" inside the set method

Abdelillah Aissani
– Abdelillah Aissani

2019-08-23 13:09:30 +00:00
Commented Aug 23, 2019 at 13:09 — Abdelillah Aissani
– Abdelillah Aissani, Commented Aug 23, 2019 at 13:09

Abdelillah Aissani · Accepted Answer · 2019-08-23 13:43:12Z

1

Why is the message not refreshed after calling set method?

When you type something on your input the message data gets updated via an event handler BUT when you set it programmatically the event handler is NOT triggered and that's why message was not getting updated / refreshed....

Solution :

a short solution to your issue would be just to mutate the message value this.message = "xxxx" but if you insist on making that programmatically you have to trigger the input event :

set: function() {
  let element = this.$refs.templateFilter
  Vue.set(element, 'value', 'xxxx')
  element.dispatchEvent(new Event('input'))
}

Here is a Demo : codepen

edited Aug 23, 2019 at 13:43

answered Aug 23, 2019 at 13:37

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

set value of input programatically doesn't refresh component DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related