問題タブ [vue-dynamic-components]

vuex + vue-router + 動的コンポーネントを使用して、Web サイトのヘッダーとフッターを表示します。vuex を介して vue-router から現在のルートを取得し、ヘッダーとフッターがある App.vue にデータを「注入」します。すべてのページの正しいルートを console.log できます。

app.vue マークアップは次のようになります。

ここで、正しいコンポーネントを表示するために、計算されたプロパティ selectedFooter と selectedHeader を使用します。

基本的には機能しますが、計算されたプロパティを正しく使用していないため、すでに副作用が発生していると思います。たとえば、ストアからのルートデータが間違いなく正しい場合でも、1 つのルートが間違った言語ヘッダーに表示されますか?

ウォッチャーを使用した方が良いと思いますが、どうですか？

mustache syntax({{ obj.name }}) を使用するテンプレートを作成しましたが、その構文に入力するデータがありません。

コンポーネントが作成され、しばらくしてから API リクエストが行われると、コンポーネント データ (vm._data[obj] = {name: 'test'}) に更新している情報を取得します。

この場合、(vue コンポーネントを開始している間) テンプレートを設定するためにデータをすぐに利用できないため、データを取得して更新した後でも、テンプレートは更新されません。