0

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

  <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>
1
  • tasks.slice().reverse() вот эта строчка говорит о том что нужно вывести список в обратном порядке, удалите reverse() должно помочь Commented 7 апр. 2020 в 18:46

2 ответа 2

0

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

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

Ответ для 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.