javascript - vuejs component array push watcher -
confusing title, wasn't sure how else write it. have component , accepts prop array. looking do, on array.push() function trigger array element.
so alert toast message, , want stay 3 seconds. thinking
watch: { arrayobj: function () { let self = settimeout(function() { self.dismiss(this.id) }, 3000) } }
but think may missing here. how latest pushed object's reference make sure dismiss method calls correct alert? watch correct way go this?
i'm not entirely clear on behavior you're trying get, seems me need keep track of latest pushed item , pass component. component watch latestpushed
, act accordingly.
if latest pushed item repeated, not see change when duplicate value pushed. in case, makes sense pass event bus prop component , send , event when parent pushes.
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"> pushed {{latestpush}} </div> </toaster-note> </div>
Comments
Post a Comment