vuejs組件陣列推送觀察者

-1

令人困惑的標題，我不知道如何寫它。所以我有一個組件，它接受一個數組的道具。我想要做的是在array.push（）我想要一個函數來觸發該數組元素。vuejs組件陣列推送觀察者

所以這是一個警告敬酒信息，我希望它保持3秒鐘。所以我正在考慮像

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

但我想我可能會錯過這裏的東西。我如何獲得最新的推送對象的參考，所以我確保dismiss方法調用正確的警報？觀看甚至是正確的方式去做這件事？

來源

2017-07-27 173901

'變種最後=此[this.length-1]'？ – lloyd

但是當dismiss（）被調用時，這會讓我超出界限的異常，因爲數組對象不存在，它仍然是被調用的 – 173901

是否有其他數組操作可行？片？流行？ –

我不完全清楚你想要獲得什麼樣的行爲，但在我看來，你需要跟蹤最新的推送項目並將其傳遞給你的組件。該組件將監視latestPushed並採取相應措施。

如果可以重複最新的推送項目，當推送重複值時不會看到更改。在這種情況下，將事件總線通道傳遞給組件並在父組件推送時發送和事件是有意義的。

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>

來源

2017-07-28 12:48:07

vuejs組件陣列推送觀察者

回答

相關問題