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.

Answer 1

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>

Answer 2

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>

Answer 3

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