Я в vue новичок. Не могу сообразить. Надо сделать несколько сообщений, которые с разный скоростью будут исчезать.
т.е.
<message>Сообщение исчезнет через 5 секунд</message>
<message>Сообщение исчезнет через 20 секунд</message>
<message>Сообщение исчезнет через 15 секунд</message>
Пока все что я придумал что надо делать через v-for, у каждого сообщения делать v-if , поле visible , по таймауту буду его менять, оно будет исчезать. Но мне это кажется не оптимальным.
Есть какой-то другой способ вставлять кусок html/компонент в нужное место, и главное - убирать его. В идеале функция которая сама добавляет элемент, сама убирает его.
UPD: Как я сейчас сделал. (
код с несущественной ошибкой, в удалении элемента из массива)
Компонент который вставляется.
<template>
<div class="alert alert-dismissible fade show"
v-bind:class="[currentClass]"
>
<button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
<i class="nc-icon nc-simple-remove"></i>
</button>
<span> {{ message }}</span>
</div>
</template>
<script>
export default {
name: "Alert",
props: [
'message', 'currentClass'
],
}
</script>
Как вставляется в html:
<alert
v-for="(item,index) in alertsArr"
:key="index"
:message="item.message"
:current-class="item.currentClass"
></alert>
И кусок кода, который это обрабатывает.
export default {
components: {
alert: Alert
},
methods: {
setAlert() {
this.addAlert("da", "alert-danger ", 1000);
},
addAlert(message, currentClass, time) {
this.$set(this.alertsArr, this.indexOfAlerts, {
'message': message,
'currentClass': currentClass,
});
setTimeout(function () {
this.$delete(this.alertsArr, this.indexOfAlerts);
// console.info(this.alertsArr);
this.indexOfAlerts++;
}.bind(this), time);
},
},
data() {
return {
alertsArr: [],
indexOfAlerts: 0,
Мне кажется это нерациональным каким-то. Вся эта возня с массивом создает много телодвижений и я не могу вставить этот компонент куда-то еще, на этой же странице.
В идеале, мне нужна возможность, допустим по id html элемента вставлять.
Средний
