私は解決策がこのようにプロップデータを更新することを知っています:
this.selectedContinent = ""
しかし、別のソリューションを使用したい
参考資料を読んだ後の解決策は次のとおりです。
this.$forceUpdate()
試してみましたがうまくいきません
このようなデモと完全なコード:
https://jsfiddle.net/Lgxrcc5p/13/
ボタンテストをクリックして試すことができます
プロパティデータを更新する以外の解決策が必要です
コンポーネントにキーを割り当てる必要があります。コンポーネントを再レンダリングする場合は、キーを更新するだけです。詳細 ここ 。
<template>
<component-to-re-render :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0
}
},
methods: {
forceRerender() {
this.componentKey += 1
}
}
}
V-ifを使用してコンポーネントをレンダリングします。
<div id="app">
<button type="button" @click="updateComponent">test</button>
<test-el v-if="show"></test-el>
</div>
リロードする必要があると思いましたが、マウントされたフック内のすべてをinitメソッドに移動できました。マウントされたフックはinitメソッドを呼び出し、親がすべてを再ロードする必要がある場合は、refを使用してthis。$ refs.componentName.init();を呼び出すことができます。
私も同じ問題に直面しています。コンポーネントの再読み込みにはlocation.reload()
を使用しました。
これは、この問題を解決する正しい方法ではない可能性があります。しかし、これで私の問題は解決しました。