Vueの非同期更新キュー編

by Nobuhiko Futagami

HTML

<div id="app">
  <h1>Vueの非同期更新キュー編</h1>
  <p id="msg">
    {{message}}
  </p>
  <hr>
  <button @click="update()">
  update!
  </button>
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

button {
  display: block;
}

Vue

new Vue({
  el: "#app",
  data: {
  	message: "not updated."
  },
  computed: {
  	playVideo() {
    	return this.videos[this.playVideoIndex]
    }
  },
  methods: {
    update() {
      this.message = 'updated.'
      const msg = document.getElementById('msg');
      console.log(msg.textContent); // log is 'not updated.'
      
      this.$nextTick(() => {
	      console.log(msg.textContent); // log is 'updated.'
      })
    }
  }
})