[Vuejs]-Vue loop with conditional like PHP

by

0👍

I recommend using the render function in this case to reduce the complexity in the template as below

new Vue({
  el: "#app",
  data: {
    grades: ['A', 'B', 'C', 'D'],
  },
  render (createElement) {
    const elements = [];
    const step = 2;
    for (let i = 0; i < this.grades.length; i += step) {
      elements.push(
        createElement(
          'ul',
          {},
          this.grades.slice(i, i + step).map(grade => createElement('li', {}, grade)))
      )
    }

    return createElement('div', {}, elements);
  }
});

JSFiddle: https://jsfiddle.net/cf37vta9/

Reference: https://v2.vuejs.org/v2/guide/render-function.html

Leave a comment