如何通过使用 Vue.js 3 按下按钮来一一显示数组中的元素

Question

我正在尝试使用 Vue.js 构建一个简单交互式故事的快速原型（我想要实现的示例：https://www.getbadnews.com/#play），但我无法让我的 Vue 应用程序显示来自当我单击按钮时，在无序列表内的列表中逐一排列。

您知道实现这一目标的最佳方法吗？

这是我当前的代码：

const InteractiveStory = {
  data() {
    return {
      list: [];
    }
    
  },
  methods: {
    addList: function() {
      var number = 0;
      var storySnippets = ["Hello", "Two", "Three", "Four"];
      this.list.push(storySnippets[number]);
      number++;
    },
  },
}

Vue.createApp(InteractiveStory).mount('#story')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="story">
  <ul>
    <li v-for="item in list"></li>
  </ul>
  <button @click="addList()">Next</button>
 </div>

感谢您的帮助，我已经坚持了两天:)

Answer 1

我实际上会以不同的方式处理此问题...从完整列表开始，并使用计算属性逐步显示元素。

const InteractiveStory = {
  data: () => ({
    sourceList: ["Hello", "Two", "Three", "Four"],
    index: 0
  }),
  computed: {
    list: ({ sourceList, index }) => sourceList.slice(0, index)
  },
  methods: {
    addList() {
      this.index = Math.min(this.index + 1, this.sourceList.length)
    }
  }
}

Vue.createApp(InteractiveStory).mount('#story')

<script src="https://unpkg.com/vue@next"></script>

<div id="story">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
  <button @click="addList">Next</button>
</div>