Вывод списка из массива в обратном порядке в v-for

Question

Мой код добавляет задачи (в начало массива) и удаляет их.Мне необходимо чтобы задачи выводились от последней задачи к первой (снизу вверх).

  <div class="wrapper">
      <div v-for="(task , index) in tasks.slice().reverse() " :key="index" class="tasks">
      <p> {{index + 1 }}) {{task}} <button v-on:click="tasks.splice(index, 1)">Удалить</button></p>
      </div> 
      <div class="footer"><input type="text" v-model="newTask" class="input"/>
        <button @click="tasks.push(newTask)">Добавить</button>
      </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      tasks:[],
    }
  }
}
</script>

Answer 1

Вы можете использовать CSS flex-boxes для решения этой задачи, задайте на главный блок такие стили:

.wrapper {
    display: flex;
    flex-direction: row-reverse; /* либо же column-reverse */
}

Answer 2

Ответ для 2023 года:

Используйте новые методы массивов ECMAScript 2023, не мутирующие изначальный массив.

<div v-for="(task, i) in tasks.toReversed() " :key="i">

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

БЛОГ НА HUSL

Вывод списка из массива в обратном порядке в v-for

Ответы (2 шт):