Как сделать v-for итерацию в определенном порядке?

Question

Как сделать v-for итерацию в определенном порядке?

1

У меня есть и массив объектов, элементы которых упорядочены произвольно. Я хотел бы перечислить значения в определенном порядке (ключей).

Например, приведенная ниже итерация перечисляет их:

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1
      },
      {
        third: 30,
        first: 10,
        second: 20
      }
    ],
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  <div v-for="a in all">
    <div v-for="(v, k) in a">{{v}}</div>
  </div>
</div>

Можно ли управлять итерацией так, чтобы она упорядочивалась в соответствии со списком ключей (["first", "second", third"]), которая давала бы

WoJ 01 июнь 2017, в 15:40

Источник

Теги:

javascript

vue.js

4 ответа

3

Я не знаю vue, но вы можете сделать это в javascript.

<div v-for="k in Object.keys(a).sort()">{{k}}:{{a[k]}}</div>

Также обратите внимание, что сортировка по алфавиту случайно вписывается в вашу потребность, но вам может понадобиться пользовательская функция sort((a,b)=>order.indexOf(a)-order.indexOf(b)) такая как sort((a,b)=>order.indexOf(a)-order.indexOf(b)) с вашим пользовательским order: ["first","second","third","fourth"] который не может быть буквенным.

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1,
        fourth: 4
      },
      {
        third: 30,
        first: 10,
        second: 20,
        fourth: 40
      }
    ],
    order: ["first","second","third","fourth"]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  <div v-for="a in all">
    <div v-for="k in Object.keys(a).sort((a,b)=>order.indexOf(a)-order.indexOf(b))">{{k}}:{{a[k]}}</div>
    <hr/>
  </div>
</div>

sabithpocker 01 июнь 2017, в 10:42

0

Вы можете использовать вычисляемые свойства и получить all отсортированные сначала перед итерацией через них.

Ajeh Emeke Jnr 01 июнь 2017, в 11:58

0

В модуле 5 моего учебного курса Vue.js я на самом деле обсуждаю это. На первый взгляд подход Object.keys может показаться правильным подходом. Однако разные JavaScript-движки возвращают свойства в разных порядках. По этой причине вы не можете положиться на это.

В Vue.js вы можете либо a) сортировать свой массив при заполнении массива. B) создать "вычисленное свойство" или c) создать метод сортировки, в который вы можете передать свое свойство.

На мой взгляд, вы должны использовать опцию b. Причина в том, что вычисленные свойства получают кеширование. Делая это, вы только запускаете свой код сортировки один раз. Однако, если бы вы использовали опцию c, сортировка выполнялась бы во время каждой итерации. Вариант a - возможность, но я не знаю достаточно о вашем сценарии, чтобы узнать, является ли это реальным вариантом или нет.

Chad Campbell 01 июнь 2017, в 11:35

Ещё вопросы

Daniel Beck · Accepted Answer · 2017-06-01T12-05-00.000Z

Вы можете поместить список отсортированных ключей в массив и v-for вместо этого.

<div v-for="a in all">
  <div v-for="key in presortedListOfKeys">
    {{a[key]}}
  </div>
</div>