vuejs does not update html when I change data in created

Question

Here is the link

html looks like

<span>items[selected].text: {{ items[selected].text }}</span>

and created:

created() {
  setTimeout(() => {
     this.items[0] = {
        text: "XX"
     };
     this.items[1] = {
        text: "YY"
     };
  }, 1000)
 }

this does not update automatically, if I click the select, it will change though. And if I remove setTimeout, it will update automatically.

try This: ` this.items[0].text = 'XX'; this.items[1].text = 'YY';` — Najam Us Saqib
– Najam Us Saqib, Commented Jan 8, 2019 at 6:35

Jeremy Walters · Accepted Answer · 2019-01-08 06:34:38Z

1

You can't manipulate array in this way with vue please refer to: Common Gotchas

Here is an example how it would work: https://codepen.io/anon/pen/NezvYV

this.items.$set(0, {
            text: "XX"
         })

answered Jan 8, 2019 at 6:34

Jeremy Walters

2,15219 silver badges30 bronze badges

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

1 Comment

Well you can read it all in the docs(vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats). $set is an alias for Vue.set

Moumen Soliman · Accepted Answer · 2019-01-08 06:37:08Z

0

You can use

   this.items[0].text = 'XX';
   this.items[1].text = 'YY';

answered Jan 8, 2019 at 6:37

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges