Как отображать элементы из массива один за другим, нажимая кнопку с помощью Vue.js 3

Я пытаюсь создать быстрый прототип простой интерактивной истории с помощью 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>

Спасибо за вашу помощь, я застрял на этом в течение двух дней :)


javascript html vue.js vuejs3
person Charlie Maréchal    schedule 15.12.2020    source источник
comment
list: []; не должен заканчиваться точкой с запятой. Вы используете Vue 2 или Vue 3? В вашем фрагменте есть версия 2, но Vue.createApp относится к версии 3.   -  person Phil    schedule 16.12.2020
comment
Извините, забыл упомянуть, что я использую Vue.js 3!   -  person Charlie Maréchal    schedule 16.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле я бы подошел к этому по-другому... начните с полного списка и используйте вычисляемое свойство для постепенного раскрытия элементов.

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>

person Phil    schedule 15.12.2020
comment
Спасибо, это работает! Однако, поскольку я начал изучать Vue непосредственно в версии 3, я немного не знаком с этой последовательностью: синтаксис? - person Charlie Maréchal; 16.12.2020
comment
@CharlieMaréchal, который отлично работает в Vue 3 (я обновил свой ответ с Vue 2 до 3) - person Phil; 16.12.2020