[Vuejs]-How to iterate the HTML elements with some specific condition?

by

1👍

You can pass index into your v-for, then use it in conditionals inside the loop. I’ve modified your example to show the principle. The text box appears for every section on the first loop, or if sectionData === beta. You can see this condition in the v-if.

This works, but in general, every time you use v-for, you should create a component. The structure quickly gets difficult to understand otherwise.

var arr = [{
    sectionName: 'First Section',
  data: ['alpha', 'beta']
}, {
    sectionName: 'Second Section',
  data: ['alpha', 'beta', 'gama']
}];

var myitem = new Vue({
  el: '#my-items',
  data: {
    items: arr
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>

<div id="my-items">
  <div v-for="(item, index) in items">
    {{ item.sectionName }} <hr>
    <div v-for="sectionData in item.data" style="margin: 5px">
      <span style="width:50px;text-align:left;display:inline-block;">{{ sectionData }}</span>
      <input 
        v-if="index === 0 || sectionData === 'beta'"
        type="textbox"
      />
    </div>
  </div>
</div>

Leave a comment