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

Customizing ESLint configurations for a more productive local development environment

Scripting issues detected in Safari and Microsoft Edge browsers

Guide on efficiently inserting values into an array of objects

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

Using React to update an existing array of objects with a new array containing objects of the same type

Chrome's XPath attribute selection is not functioning properly

I am encountering an issue stating "indexRouter has not been defined"

What is the process for exporting an NPM module for use without specifying the package name?

PHP's for loop may not iterate through the entire array

There seems to be a problem with the output when trying to display the message "You said ${reply}"

The PHP script is not being activated by AJAX

I am looking to implement custom styles to a navigation bar element upon clicking it

Pinia throws a useStore is not callable error

The value returned by a mocked Jest function is ignored, while the implemented function is not invoked

Unable to make a successful POST request using the JQuery $.ajax() function

Utilize Vue.js to transmit HTTP requests with specified headers and parameters

"Troubleshooting VueJS: Issue with default value not being set in

Leveraging Vue 3 Composition API with accessors

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

Utilizing Regular Expressions in AngularJS to validate name, a 10-digit mobile number, and a 12-digit number through the ng-blur event and match