Заказать при использовании v-for - PullRequest
Новая
       9

Заказать при использовании v-for

0 голосов
/ 26 мая 2018

При использовании v-for для итерации по массиву, например так: 

<ul id="example-1">
  <li v-for="item in items">
     {{ item.message }}
  </li>
</ul>

Элементы располагаются друг под другом:

  • Элемент списка с индексом 1
  • Элемент списка с индексом 2
  • Элемент списка с индексом ...
  • Элемент списка с индексом n

Есть ли способ добавить элементиз текущей итерации над последним элементом?

  • Элемент списка с индексом n
  • Элемент списка с индексом ...
  • Элемент списка с индексом 2
  • Элемент списка с индексом 1

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 27 мая 2018

Простое решение состоит в том, чтобы использовать вычисляемое свойство вашего items, которое переворачивает массив (не изменяя его на месте, если он используется как prop, или для сохраненияего порядок как первоначально объявлено): reversedItems() { return this.items.slice().reverse(); }

Пример кода: 

new Vue({
  el: "#app",
  data() {
    return {
      items: ["item 1", "item 2", "item 3"],
    }
  },
  computed: {
    reversedItems() {
      // Reverse a COPY of the array to avoid messing with its initial order.
      return this.items.slice().reverse();
    },
  },
  methods: {
    loadItem() {
      const i = this.items.length;
      // Append to the end of the array in a simple approach,
      // and let the computed property re-order the array.
      this.items.push("item " + (i + 1));
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in reversedItems">{{ item }}</li>
  </ul>
  <button @click="loadItem">Load item</button>
</div>

Обратите внимание, что Vue исправляет методы массива (как reverse) при применении к реактивным данным (как переменные, которые вы объявляете в data), так что результат также является реактивным.Вот почему данные reversedItems в ответе @ sovalina становятся реагирующими на items модификации, тогда как они назначаются только один раз, когда компонент монтируется.

0 голосов
/ 27 мая 2018

Вы можете использовать второй массив для «хранения» ваших обращенных данных и использовать unshift (вместо push), чтобы поместить каждый новый элемент в начало «обращенного» массива: 

new Vue({
  el: "#app",
  data() {
    return {
      items: ["item 1", "item 2", "item 3"],
      reversedItems: []
    } 
  },
  mounted() {
    this.reversedItems = this.items.reverse()
  },
  methods: {
    loadItem(){
      let i = this.items.length
      this.items.unshift("item " + (i + 1))
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in reversedItems">{{ item }}</li>
  </ul>
  <button @click="loadItem">Load item</button>
</div>
...