如何在单个Vuetify Snackbar中按间隔依次显示多条文本

需要在单个Snackbar中按时间间隔依次显示多个字符串，比如先显示"This is snackbar one"1分钟，再显示下一条内容。但当前实现里所有文本都堆在Snackbar里，控制台日志还显示messages数组一直在添加文本。

原代码如下：

原模板代码 #

<template>
  <div>
    <v-app light>
      <v-snackbar
        v-model="snackbar"
        :multi-line="mode === 'multi-line'"
        :timeout="timeout"
        :top="y === 'top'"
        :color="'success'"
        :messages.sync="messages"
      >
        <div>{{ text }}</div>
        <v-btn @click="snackbar = false"> X </v-btn>
      </v-snackbar>
    </v-app>
  </div>
</template>

原脚本代码 #

<script>
export default {
  data () {
    return {
      snackbar: true,
      y: "top",
      x: "right",
      mode: "",
      timeout: 6000,
      text: [
        "This is Snackbar ONE",
        "This is Snackbar TWO",
        "This is Snackbar THREE",
        "This is Snackbar FOUR",
        "This is Snackbar FIVE",
        "This is Snackbar SIX",
        "This is Snackbar SEVEN",
      ],
      indexText: 0,
      messages: [],
    };
  },

  async created() {
        showMessage() {
            console.log('this.text : ', this.text)
            if (this.indexText >= this.text.length) this.indexText = 0;
            this.messages.push(this.text[this.indexText++]);
            console.log('this.messages : ', this.messages)
       },
   },
};
</script>

1. 模板直接绑定整个text数组，导致所有文本一次性渲染出来
2. 使用messages.sync并持续往数组push内容，这是Vuetify Snackbar批量展示多条消息的方式，不符合单条切换需求
3. showMessage方法从未被调用，也没有定时逻辑触发文本切换
4. 超时时间设为6000毫秒（6秒），和需求的1分钟不符

调整代码逻辑，用单变量存储当前要显示的文本，通过定时器定时切换：

修正后的模板 #

<template>
  <div>
    <v-app light>
      <v-snackbar
        v-model="snackbar"
        :multi-line="mode === 'multi-line'"
        :timeout="timeout"
        :top="y === 'top'"
        color="success"
      >
        <div>{{ currentText }}</div>
        <v-btn @click="snackbar = false"> X </v-btn>
      </v-snackbar>
    </v-app>
  </div>
</template>

修正后的脚本 #

<script>
export default {
  data () {
    return {
      snackbar: true,
      y: "top",
      x: "right",
      mode: "",
      timeout: 60000, // 改为1分钟（60000毫秒）
      textList: [
        "This is Snackbar ONE",
        "This is Snackbar TWO",
        "This is Snackbar THREE",
        "This is Snackbar FOUR",
        "This is Snackbar FIVE",
        "This is Snackbar SIX",
        "This is Snackbar SEVEN",
      ],
      currentIndex: 0,
      currentText: "",
      timer: null
    };
  },

  created() {
    // 初始化显示第一条消息
    this.showNextMessage();
    // 启动定时切换
    this.startAutoSwitch();
  },

  methods: {
    showNextMessage() {
      // 索引超出范围时重置，实现循环展示
      if (this.currentIndex >= this.textList.length) {
        this.currentIndex = 0;
      }
      this.currentText = this.textList[this.currentIndex++];
      // 手动关闭后重新打开（不需要自动恢复可移除这行）
      this.snackbar = true;
    },
    startAutoSwitch() {
      // 每隔timeout时间切换一次消息
      this.timer = setInterval(() => {
        this.showNextMessage();
      }, this.timeout);
    }
  },

  beforeUnmount() {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

• 移除messages.sync，改用currentText存储当前单条消息，确保每次只显示一条
• 将timeout改为60000毫秒，匹配1分钟的展示需求
• 添加currentIndex跟踪当前展示的消息位置，超出数组长度时重置实现循环
• 通过setInterval定时调用切换方法，实现自动轮播
• 组件销毁时清除定时器，防止内存泄漏
• 可选：切换时自动重新打开Snackbar，避免手动关闭后停止轮播

内容的提问来源于stack exchange，提问作者Jazz