Iterating through a collection of items in Vue.js using the v

Question

Iterating through a collection of items in Vue.js using the v

I am attempting to cycle through an object using v-for.

exampleObject =[a,b,c,d]
Requirement = display only a if it exists in exampleObject, otherwise show b, c, d.

<div v-if="checklist.types">
      <div v-for="type in checklist.types">
         <div v-if="type.Name == 'Module1'">
              show module 1
         </div>
         <div v-else>
             <span>{{type.Name }}</span>
         </div>
     </div>
</div>

The above code displays all values because the condition is checked within the For Loop. Is there a way to iterate and check the object beforehand?

javascript vue.js for-loop vuejs2

Answer 1

Answer №1

To efficiently handle the data, you can create a computed property that generates an array containing...

Only a / Module1 if it is available
The entire exampleObject / checklist.types otherwise

This computed property can then be easily iterated through.

export default {
  data: () => ({
    checklist: {
      types: [/* whatever */]
    }
  }),
  computed: {
    modules: ({ checklist: { types } }) => {
      const module1 = types.find(({ Name }) => Name === "Module1")
      return module1 ? [module1] : types
    }
  }
}

<div v-for="module in modules" :key="module.Name">
  <span>{{ module.Name }}</span>
</div>

Answer 2

To efficiently handle the data, you can create a computed property that generates an array containing...

Only a / Module1 if it is available
The entire exampleObject / checklist.types otherwise

This computed property can then be easily iterated through.

export default {
  data: () => ({
    checklist: {
      types: [/* whatever */]
    }
  }),
  computed: {
    modules: ({ checklist: { types } }) => {
      const module1 = types.find(({ Name }) => Name === "Module1")
      return module1 ? [module1] : types
    }
  }
}

<div v-for="module in modules" :key="module.Name">
  <span>{{ module.Name }}</span>
</div>

Iterating through a collection of items in Vue.js using the v

Answer №1

Similar questions

Checking for an existing alert in JavaScript

terminate a node-cron task or abort a node-scheduler job

Tips for showing various column information as tooltips in ag grid's pivot mode

Modifying certain elements in a text to emphasize (PHP)

Acquire feedback from PHP using SweetAlert notifications

Dynamic properties in JQuery

Tips for passing navigator reference to React Native's <Drawer/> component?

Dynamic Changes in Vue Router Parameter Object Upon Navigating Back in Browser

Is it possible to dynamically modify the role in a migration table between admin and user in Laravel-8 based on user selection?

Ways to showcase the outcome of a spin after each rotation

Ensure to verify the dimensions and size of the image prior to uploading

"Utilizing d3 to parse and track variables within JSON data

Is the order of execution of extraReducers before or after the reducers?

retrieve all entries from a paginated grid

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

Tips for combining or adding duplicated values in a Javascript array

JavaScript forEach functionality is not compatible with Dynamics CRM 2016

What is causing the recurring failure of file input changes to take effect?

Utilizing material-ui textfield involves a delay when the input is being focused

Why are my Bootstrap nav-tabs not showing tab-content in MVC?