vuejsコンポーネント配列プッシュウォッチャー

Question

混乱するタイトル、私はそれを書く方法がわかりませんでした。 私はコンポーネントを持っており、それは配列である小道具を受け入れます。 私は何をしようとしています、array.push（）上では、その配列要素のトリガー関数が欲しいです。

これは警告のトーストメッセージですので、3秒間起きて欲しいです。私は

watch: { 
    arrayObj: function() { 
     let self = this 
     setTimeout(function() { 
      self.dismiss(this.id) 
     }, 3000) 
    } 
} 

のようなものを考えていましたが、私はここで何かが足りないかもしれないと思います。どのように最新のプッシュされたオブジェクトの参照を取得するので、私は解消メソッドが正しいアラートを呼び出すことを確認しますか？これについて正しい方法を見ていますか？

Answer 1

私はあなたが得ようとしている動作について完全にはっきりしていませんが、最新のプッシュされたアイテムを追跡してコンポーネントに渡す必要があるようです。コンポーネントはlatestPushedを見てそれに応じて動作します。

最新のプッシュされたアイテムが繰り返される可能性がある場合は、重複した値がプッシュされたときに変更が表示されません。その場合、コンポーネントにイベントバスのpropを渡し、親がプッシュするときにsendとイベントを渡すことは理にかなっています。 =この[this.length-1] `

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    bus: new Vue(), 
 
    theArray: [1] 
 
    }, 
 
    methods: { 
 
    push() { 
 
     const value = Math.floor(Math.random() * 10); 
 
     this.theArray.push(value); 
 
     this.bus.$emit('push', value); 
 
    } 
 
    }, 
 
    components: { 
 
    toasterNote: { 
 
     props: ['bus'], 
 
     data() { 
 
     return { 
 
      active: false, 
 
      latestPush: null, 
 
      timer: null 
 
     }; 
 
     }, 
 
     created() { 
 
     this.bus.$on('push', (newValue) => { 
 
      this.latestPush = newValue; 
 
      this.active = true; 
 
      clearTimeout(this.timer); 
 
      this.timer = setTimeout(() => this.active = false, 3000); 
 
     }); 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <div>{{theArray}}</div> 
 
    <button @click="push">Push</button> 
 
    <toaster-note inline-template :bus="bus"> 
 
    <div v-if="active"> 
 
     You pushed {{latestPush}} 
 
    </div> 
 
    </toaster-note> 
 
</div>