web-dev-qa-db-ja.com

vueコンポーネントを再ロードするにはどうすればよいですか？

私は解決策がこのようにプロップデータを更新することを知っています：

this.selectedContinent = ""

しかし、別のソリューションを使用したい

参考資料を読んだ後の解決策は次のとおりです。

this.$forceUpdate()

試してみましたがうまくいきません

このようなデモと完全なコード：

https://jsfiddle.net/Lgxrcc5p/13/

ボタンテストをクリックして試すことができます

プロパティデータを更新する以外の解決策が必要です

vue.jsvuejs2vue-componentvuex
6
Success Man

コンポーネントにキーを割り当てる必要があります。コンポーネントを再レンダリングする場合は、キーを更新するだけです。詳細 ここ 。

<template>
    <component-to-re-render :key="componentKey" />
</template>

export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}
17
Ilyich

V-ifを使用してコンポーネントをレンダリングします。

<div id="app">
      <button type="button" @click="updateComponent">test</button>
      <test-el v-if="show"></test-el>
</div>

デモ

5
Julien

_Object.assign_を使用して、初期データプロパティを割り当てることができます。

this.$forceUpdate()の代わりに

Object.assign(this.$data,this.$options.data.call(this))を使用する必要があります。

ここでthis。$ options.dataを使用して元のデータを取得し、この値をthis。$ dataに割り当てます。

更新されたフィドル Link を参照してください。

更新：

別の方法： Link

1
Shubham Patel

リロードする必要があると思いましたが、マウントされたフック内のすべてをinitメソッドに移動できました。マウントされたフックはinitメソッドを呼び出し、親がすべてを再ロードする必要がある場合は、refを使用してthis。$ refs.componentName.init（）;を呼び出すことができます。

0
ThriftyNick

私も同じ問題に直面しています。コンポーネントの再読み込みにはlocation.reload()を使用しました。
これは、この問題を解決する正しい方法ではない可能性があります。しかし、これで私の問題は解決しました。

0
Pulkit Aggarwal