Why is Vuejs not updating elements in time?

Question

I am currently faced with a situation where I add options to a select element via vuejs when the @change of that specific element is called.

The problem is that the new option is not 'registered' until I leave the function.

I made a jsfiddle to demonstrate this behaviour: https://jsfiddle.net/bz8361Lp/

In this demo, if a option in the select element is selected, a new option is added to the select. The console is still printing the old number of entries.

new Vue({
  el: "#app",
  
  data: {
      data: ["test", "hallo", "bye"]
  },
  methods: {
    onChange(event) {
      console.log("test")
      this.data.push("hello")
      const element = document.getElementById("select")
      console.log(element.options.length)
    }
  }
})

I am looking for some guidance on how I can avoid this problem, what I am doing wrong and what a best practice could be.

Thanks.

Please look at vuejs.org/v2/guide/reactivity.html#Async-Update-Queue — Anatoly
– Anatoly, Commented Dec 28, 2020 at 18:42

tony19 · Accepted Answer · 2022-07-16 00:02:53Z

2

This is because Vue.js updates DOM not immediately but on the next event loop processing. You can read about this in detail here

You can check this by using nextTick:

onChange(event) {
      console.log("test")
      this.data.push("hello")
      this.$nextTick(() => {
        const element = document.getElementById("select")
        console.log(element.options.length)
      });
    }

edited Jul 16, 2022 at 0:02

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 28, 2020 at 18:46

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

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

1 Comment

DaVincr Over a year ago

Thank you, this has been really helpful.

mk_xt · Accepted Answer · 2020-12-28 18:51:51Z

0

need to wait for the dom to render and then evaluate. You can find more information about what the function does '' this.$nextTick()

new Vue({
  el: "#app",
  
  data: {
      data: ["test", "hallo", "bye"]
  },
  methods: {
    onChange(event) {
      console.log("test")
      this.data.push("hello")
      
      this.$nextTick(() => {
        const element = document.getElementById("select")
        console.log(element.options.length)
      })
    }
  }
})

answered Dec 28, 2020 at 18:51

mk_xt

5811 gold badge4 silver badges6 bronze badges

Collectives™ on Stack Overflow

Why is Vuejs not updating elements in time?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related