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

Question

У меня есть простой цикл v-for, который повторяется 5 раз от 1 до 5, однако я хочу выполнить цикл в обратном направлении от 5 до 1? Это возможно? Я добавляю класс к элементу списка и хочу заполнить элементы списка от наиболее полного до наименее полного сверху

Добавление | реверс не работает

<div v-for="n in 5 | reverse" :key="n.index">
    <div class="container">
        <ul class="rating">
            <li :class="[ (n <= 5) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 4) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 3) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 2) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 1) ? 'fill' :'' ]"></li>
        </ul>
        <span>{{ n }}</span>
    </div>
</div>

Answer 1

Фильтры массива больше не работают в v2. Но вы можете сделать свой собственный метод reversed.

"n in [...Array(5).keys()].slice().reverse()" работает, а значит:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  methods: {
    reverseKeys(n) {
      return [...Array(n).keys()].slice().reverse()
    }
  }
})

.rating, .container {
  display: flex;
  list-style-type: none;
  margin: 0;
}
.rating li {
  width: 1rem;
  height: 1rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  margin: .1rem;
}
.fill {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="n in reverseKeys(5)" :key="n">
      <div class="container">
          <span>{{ n + 1 }}</span>
          <ul class="rating">
              <li v-for="key in 5" :class="{ fill: key <= n + 1 }" :key="key" />
          </ul>
      </div>
  </div>
</div>