Synchronize result with value changed in vue.js

Question

I wrote .vue file like below to change h1#msg after 100ms.

<template>
  <div id="main">
    <h1 id="msg">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Top',
  data () {
    let a=['TEST']
    setTimeout((function(a){a[0]='test'}),100)
    return {
      msg: a
    }
  }
}
</script>
<style>
</style>

However I cannot change state by this code. I tried to use Array to pass value by reference. I don't like to use querySelector(), because it forces me to add attitude in HTML and arguments for methods.

Adriano Resende · Accepted Answer · 2017-12-14 01:41:37Z

4

Dont write javascript inside data(), the correct is this code:

<script>
export default {
  name: 'top',
  data () {
    return {
      msg: 'test'
    }
  }
  mounted() {
    setTimeout(() => this.msg = 'Bu!', 100)
  }
}
</script>

answered Dec 14, 2017 at 1:41

Adriano Resende

2,6291 gold badge31 silver badges34 bronze badges

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

Comments

Jrey · Accepted Answer · 2017-12-14 01:41:42Z

1

Try this code snippets

<template>
  <div id="main">
    <h1 id="msg">{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
  name: 'Top',
  data () {
    return {
      msg: 'a'
    }
  },
  created() {
    setTimeout(() => this.msg = 'Hello World!', 100)
  }
}
</script>

answered Dec 14, 2017 at 1:41

Jrey

1,6382 gold badges17 silver badges34 bronze badges

Comments

Roy J · Accepted Answer · 2017-12-14 01:41:45Z

0

Your data should just declare the variable to whatever you want it to be before the change. Then do the timeout in mounted.

answered Dec 14, 2017 at 1:41

Roy J

44k10 gold badges84 silver badges106 bronze badges

Collectives™ on Stack Overflow

Synchronize result with value changed in vue.js

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related