【Vue.js】propsの値を検知してコンポーネントを再レンダリングさせる方法

Vue.jsでpropsの値が変更されたら子コンポーネントを再マウントさせたい場面に出くわしました。
その際にかなり苦戦したので備忘録を残しておきます。

Vue.jsの子コンポーネントをリロード・再レンダリングさせる方法

以下の記事を参考にすることで解決することができました。

Vue.jsの子コンポーネントをリロード・再レンダリングさせる方法

参考にさせて頂いた記事では2つの方法が紹介されていましたが
おそらく大体のことは以下の2つで解決できると思います。

  • v-ifを使うことで再マウントさせる
  • keyの値を変えてあげることで再マウントさせる

propsの値をwatchで検知してv-ifで再レンダリングさせる

上記の記事を参考にpropsの値が変更されたら再レンダリングされるように実装します。
propsの値をwatchで監視して現在の値と新しく入ってきた値を比較して変わっていたらv-ifで再マウントさせてあげます。
また念の為nextTickメソッドを使用することでVue.jsのデータの変更に基づいてDOMを更新した後にフラグを変更してやるようにします。

<template>
  <div>
    <child v-if="$data.displayStatus" ref="component" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  props: {
    fruit: {
      type: String,
      require: false,
      default: 'apple'
    },
  },
  data () {
    return {
      displayStatus:true
    }
  }, 
  watch: {
    fruit: {
      handler: function(newData, oldData) {
        if(oldData !== newData) {
          this.$data.displayStatus = false
          this.$refs.MonthBarChart.$nextTick(() => {
            this.$data.displayStatus = true
          })
        }
      },
    },
    deep : true,
    immediate: false
  }
}

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。