更改单个小吃栏中的文本

Question

因此，有第 n 个字符串值。我需要在一段时间后在单个小吃栏上一个一个地显示这些字符串值。例如 - “This is snackbar one”应该显示 1 分钟，然后再次显示“This is snackbar 2”。

目前，我正在获取 snackbar 中的所有文本。请参考下图 -

HTML 模板 -

<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>

还为 console.log 添加 SS -

Answer 1

您的代码有问题，created 挂钩是异步的，因此您不能在创建的挂钩内调用 showMessage 函数。相反，您应该在 mounted 挂钩中调用 showMessage 函数。

此外，您需要设置一个时间间隔以在一定时间间隔后调用showMessage 函数。

这是更新后的代码，希望对您有所帮助：

<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: [],
    };
  },
  methods: {
    showMessage() {
      if (this.indexText >= this.text.length) this.indexText = 0;
      this.messages.push(this.text[this.indexText++]);
    },
  },
  mounted() {
    setInterval(() => {
      this.showMessage();
    }, 1000);
  },
};
</script>

在上面的代码中，我添加了一个 mounted 钩子，并在其中设置了 1 秒（1000 毫秒）的间隔，这将在每 1 秒后调用 showMessage 函数。