Vue.js - 親スコープが更新されていないテンプレート

Question

いくつかの情報を見栄えの良い方法で表示するためのコンポーネントを作成しました。このコンポーネントは、親コンポーネントの内部でレンダリングされるコンテンツの単なるラッパーです。親コンポーネントは、子コンポーネントを次のように実装します。

<my-component v-for="item in items" :key="item.id"> 
     <template slot="header"> 
      {{ item.title }} 
     </template> 
     <template slot="meta"> 
      <div> 
       <template v-if="typeof item.additionalData != 'undefined'"> 
        {{ item.additionalData.text }} 
       </template> 
      </div> 
     </template> 
    </my-component> 

データを変更するまで、正常に動作します。 itemsは親コンポーネント内の変数であり、レンダリング時にはデータは正しい方法で解析されます。レンダリング後にアイテムの中の何かを変更すると、子コンポーネントはそれを認識しません。その理由は、コンポーネントが既にレンダリングされた後にitem.additionalDataがAJAX呼び出しによって追加されるためです。

ドキュメントは親テンプレートで

すべては親スコープでコンパイルされたと言います。子テンプレートのすべてが子スコープでコンパイルされます。

しかし、これはレンダリング時にのみ当てはまるようです。

私のコンポーネントをこの方法で使用することはできませんか、それとも解決策がありますか？ docsから

Answer 1

：

により、現代のJavaScriptの制限（と Object.observeの放棄）に、Vueのは、プロパティの追加や削除を検出することはできません。 インスタンスの初期化中にVueがゲッター/セッター変換プロセスを実行するため、Vueがデータを変換してリアクティブにするには、プロパティーがデータオブジェクト に存在する必要があります。

だから私はあなたのitem.additionalDataフィールドが最初に定義されていないという事実は、それが後でそれが追加されますときにVueので逃したばかりだということを疑います。最適な解決策は、item.additionalDataを定義し、nullまたはfalseに設定することです。それが不可能な場合は、のようにVue.set(object, key, value)を使用することを検討してください。

Answer 2

アイテムテンプレートに検索アイコンを追加すると同様の問題が発生しました。 私が解決したのは、（あなたの例に関して）additionalDataを完全に反応する計算されたプロパティにすることでした。これは基本的な形式です：

computed: { 
    additionalDataText() { 
    return item.additionalData ? item.additionalData.text : null 
    } 
} 

コードに親コンポーネントまたは子コンポーネントが表示されているかどうかは不明です。
それがあるとして、あなたが作ることができる最も簡単な変更がそうのようなパラメータとしてアイテムを受け取るために計算されたプロパティが必要です。

computed: { 
    additionalDataText() { 
    return function (item) { 
     return item.additionalData ? item.additionalData.text : null 
    } 
    } 
} 

とテンプレートがこの技術

<my-component v-for="item in items" :key="item.id"> 
    <template slot="header"> 
     {{ item.title }} 
    </template> 
    <template slot="meta"> 
     <div> 
      <template v-if="additionalDataText(item)"> 
       {{ additionalDataText(item) }} 
      </template> 
     </div> 
    </template> 
</my-component> 

だろうからですUnirgyの答えはCan I pass parameters in computed properties in Vue.Jsです。この方法については少しの論争がありますが、プロジェクトで試したところ、うまくいくようです。
引用された質問では、受け入れられた答えはメソッドの使用を示唆していますが、これは必要な反応性を与えるものではありません。