show all array with vue.js and bootstrap

Question

Hi with my script i can show only the first reccord because [0] what should i do to show all reccords ? because sometimes are only one reccord and sometimes many.

<v-tab :title="sitePartGSM[0].serial_no" v-if="sitePartGSM[0]">
    <div v-for="siteParts in sitePartGSM">
        {{ siteParts.serial_no }}
        <div class="description" v-for="item in siteParts.part_attributes">
            <small>
                <strong>{{item.x_name}}</strong>
                {{item.x_value}}
            </small>
        </div>
    </div>
</v-tab>

thanks

Answer 1

hi can use a index inside v-for for example

<div v-for="(siteParts, index) in sitePartGSM">
    <v-tab :title="sitePartGSM[index].serial_no" v-if="sitePartGSM[index]">
        {{ siteParts.serial_no }}
        <div class="description" v-for="item in siteParts.part_attributes">
            <small>
                <strong>{{item.x_name}}</strong>
                {{item.x_value}}
            </small>
        </div>
    </v-tab>
</div> 

with this method you can see all records

Answer 2

You can iterate over all your sitePartGSM elements and show them in your v-tab .

When using v-for you should define a :key attribute to improve the rerendering procedure has mentioned in the documentation

<v-tab v-for="siteParts in sitePartGSM" :title="siteParts.serial_no" :key="siteParts.serial_no">
  <div>
    {{ siteParts.serial_no }}
    <div class="description" v-for="item in siteParts.part_attributes" :key="item.x_name">
      <small><strong>{{item.x_name}}</strong> {{item.x_value}}</small>
    </div>
  </div>
</v-tab>