Vue：イベントバスを使用してコンポーネントに渡されたコンポーネントのデータが渡されました

Question

私はvueアプリケーションとルーターをプッシュし、別のルーターコンポーネントにデータを渡す機能を持っています。

passData: function() { 
      EventBus.$emit('passName', this.tableRow[0]); 
      this.$router.push('/analytic-two'); 
     } 

次に、他のコンポーネント。

<template> 
    <p> 
     This is Data passed from chart component {{passedRow}} 
    </p> 
</template> 

<script> 

import { EventBus } from '../event-bus.js'; 

export default { 
    data() { 

     return { 
      passedRow: [ 
       { 
        "name": "", 
        "numSongs": "", 
        "Year": "" 
       } 
      ], 
      name: '', 
      id: '?', 

     }; 
    }, 
    created: function() { 
     const self = this; 
     EventBus.$on('passName', function (value) { 
      self.passedRow = value; 
      console.log(self.passedRow); 

     }); 
    }, 
} 

</script> 

私は、データが通過来て、そのがログに記録されている知っているが、私は、誰もが任意のアイデアを持っていない私のテンプレートでそれを表示する方法を見つけ出すことはできません。

Answer 1

私はあなたが、少なくとも進行状況を見ることができるようになります。この方法は、「=」演算子を使用しての代わりに、反応性配列を清掃して、新しい値

self.passedRow.splice('deleteCount'); 
self.passedRow.push(...value); //pushes all the values in the value-array 

でそれを埋めるしないようにお勧めします。 新しい値を設定した後にDOM-Updateを強制することもできますが、この場合はそうは思われません。これを行うには、コンポーネントを呼び出すthis.$forceUpdate()