Tips for iterating within a Vue.js template without disrupting the HTML structure

Question

Tips for iterating within a Vue.js template without disrupting the HTML structure

Currently, I am attempting to implement a loop within a table. However, I have encountered an issue with the following code:

<tr v-for="( block , index ) in listRenderBlock" :key="index">
    <div v-for="( section , i ) in block.sections" :key=" i ">
        <td> 
           <p>
              {{ block.name }}
           </p>
        </td>
        <td>
           <p>
              {{ section.name }}
           </p>
        </td>
    </div>
</tr>

When attempting this type of looping structure, the div element disrupts the integrity of the table's layout. I understand that in React, one can use something like:

blocks.sections.map(value => ....)

However, it appears that this approach does not work as expected in Vue.js either. I would greatly appreciate any suggestions or feedback on how to address this issue. Thank you for taking the time to read through this query.

javascript vue.js vuejs2

Answer 1

Answer №1

For looping without using wrappers, consider utilizing a <template>:

<tr v-for="( block , index ) in listRenderBlock" :key="index">
  <template v-for="(section , i ) in block.sections">
    <td :key="`b_${index}_${i}`"> 
      <p>
        {{ block.name }}
      </p>
    </td>
    <td :key="`s_${index}_${i}`">
      <p>
        {{ section.name }}
      </p>
    </td>
  </template>
</tr>

Note: It's important to remember that <div>'s are not valid children of <tr>.

To see this approach in action:

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

new Vue({
  el: '#app',
  data: () => ({
    listRenderBlock: [{
      name: 'B-1',
      sections: [
        { name: 'S-1' },
        { name: 'S-2' }
      ]
    }, {
      name: 'B-2',
      sections: [
        { name: 'S-1' },
        { name: 'S-2' }
      ]
    }]
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
  <tr v-for="(block, index) in listRenderBlock" :key="index">
    <template v-for="(section, i) in block.sections">
      <td :key="`b_${index}_${i}`"> 
         <p v-text="block.name" />
      </td>
      <td :key="`s_${index}_${i}`">
         <p v-text="section.name" />
      </td>
    </template>
  </tr>
</table>

Additionally, keep in mind that <template> elements cannot be given a :key, as they do not directly translate to DOM elements. Therefore, you'll need to create your own unique keying system for the actual DOM elements. In this case, we used keys based on a combination of index and i, with prefixes indicating whether it's for a block or section element. The format of the keys doesn't matter, as long as they are distinct. (These keys are only utilized by Vue internally to update DOM elements when your data changes).

Answer 2

For looping without using wrappers, consider utilizing a <template>:

<tr v-for="( block , index ) in listRenderBlock" :key="index">
  <template v-for="(section , i ) in block.sections">
    <td :key="`b_${index}_${i}`"> 
      <p>
        {{ block.name }}
      </p>
    </td>
    <td :key="`s_${index}_${i}`">
      <p>
        {{ section.name }}
      </p>
    </td>
  </template>
</tr>

Note: It's important to remember that <div>'s are not valid children of <tr>.

To see this approach in action:

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

new Vue({
  el: '#app',
  data: () => ({
    listRenderBlock: [{
      name: 'B-1',
      sections: [
        { name: 'S-1' },
        { name: 'S-2' }
      ]
    }, {
      name: 'B-2',
      sections: [
        { name: 'S-1' },
        { name: 'S-2' }
      ]
    }]
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
  <tr v-for="(block, index) in listRenderBlock" :key="index">
    <template v-for="(section, i) in block.sections">
      <td :key="`b_${index}_${i}`"> 
         <p v-text="block.name" />
      </td>
      <td :key="`s_${index}_${i}`">
         <p v-text="section.name" />
      </td>
    </template>
  </tr>
</table>

Additionally, keep in mind that <template> elements cannot be given a :key, as they do not directly translate to DOM elements. Therefore, you'll need to create your own unique keying system for the actual DOM elements. In this case, we used keys based on a combination of index and i, with prefixes indicating whether it's for a block or section element. The format of the keys doesn't matter, as long as they are distinct. (These keys are only utilized by Vue internally to update DOM elements when your data changes).

Tips for iterating within a Vue.js template without disrupting the HTML structure

Answer №1

Similar questions

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

The hover effect does not carry over to duplicated HTML

Placing a MongoDB query results in an increase of roughly 120MB in the total JS heap size

Is it possible to utilize various return values generated by a regex?

The error in React syntax doesn't appear to be visible in CodePen

"Utilize Meteor to transmit emails to internal email addresses within the intran

Choose an item from a list that does not have a particular class

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

What is the best way to iterate through two arrays without disrupting the sequence of displayed elements?

The new mui v5 Dialog is having trouble accepting custom styled widths

Knockout JS: Choosing specific dropdown elements

Is there a way to verify if an array has been initialized and holds a value simultaneously?

The button will continue to be enabled even if the textfield is empty

Function that yields promise result

Display icon within ng-bind-html when the value is not true

Display the hidden div element when clicked

What steps do I need to take in order to establish a connection to a GridFS bucket

Using an Angular route to trigger the resolution of data from a service

Algorithm to identify the highest sum of two numbers in a disorganized array of whole numbers

What is the reason for `this` becoming undefined within the filter() function in VueJS?