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
}
}関連記事
