Within a single component, there are various types present when looping through an array containing objects

Hey there, I'm looking to iterate through an array containing objects with different types within a single component.

operations = [
         {
            "id": 15525205,
            "type": "mise_en_prep",
            "referenceMep": "MB0153",
            "tax": 20,
            "size": "M"
          }

         {
            "id": 16525205,
            "type": "invoice",
            "referenceInvoice": "MB0153",
            "tax": 20,
            "size": "M"
          }
]

<div v-for="item in operations">
  <my-component 
    :size="item.size" // if type is mise_en_prep
     :tax="item.tax" // if type is invoice
    :invoice="item.referenceInvoice" // if type is invoice
  </my-component>
</div>

I'm facing the challenge of wanting to loop through this array containing objects of various types within one component. Any help or suggestions are greatly appreciated!

javascriptvue.jsnuxt.js

Answer №1

If you want to experiment, you can use the v-if directive:

Vue.component('MyComponent', {
  template: `
    <div class="">
      {{ size || tax }}
    </div>
  `,
  props: ['size', 'tax', 'invoice']
})

new Vue({
  el: '#demo',
  data() {
    return {
      operations: [
        {"id": 15525205, "type": "mise_en_prep", "referenceMep": "MB0153", "tax": 20, "size": "M"},
        {"id": 16525205, "type": "invoice", "referenceInvoice": "MB0153", "tax": 20, "size": "M"},
        {"id": 17525205, "type": "invoice", "referenceInvoice": "MB0153", "tax": 20, "size": "M"},
        {"id": 18525205, "type": "mise_en_prep", "referenceInvoice": "MB0153", "tax": 20, "size": "M"}
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(item, i) in operations" :key="i">
    <my-component v-if="item.type === 'mise_en_prep'"
      :size="item.size" 
      :tax="''" 
      :invoice="''">
    </my-component>
    <my-component v-if="item.type === 'invoice'"
      :size="''" 
      :tax="item.tax" 
      :invoice="item.referenceInvoice">
    </my-component>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How would you go about creating a VueJS component that displays a table with a set number of columns and automatically distributes the cells within them?

Hey there! I'm currently working with a VueJS component that looks like this: <template> <div> <table> <tbody> <tr v-for="(item, index) in items" :key="index"> <t ...

javascripthtmlvue.jsreactive-programming

Multiple occurrences of trigger events were detected when loading ajax content

In a div I have embedded a paragraph and a button as shown below: <div id="my_div"> <p>This is a paragraph</p> <button class="my_btn">Click here!</a> </div> The content within the div is dynamically loaded via ...

javascriptajaxeventsjquery

The magnitude of each new keystroke is squared compared to its predecessor

exploring the relationship between keyboard and console inputs Each subsequent e.key entry is occurring twice as frequently as the previous one. Once it reaches 8-9 characters, the rendering frequency skyrockets to over 1000 times per character. Here&apos ...

javascriptreactjslistconsole.log

Issue encountered during upgrade from version 10 to version 13 in a Next.js migration: Module not found

I've been working on upgrading our old site from version 10 to version 13, and we have a custom backend built with express. However, I keep encountering a "Module not found" error when running the project concurrently, specifically when running the cl ...

javascriptreactjswebpacknext.js

Exploring the concept of multiple inheritance using ES6 classes

My research on this topic has been primarily focused on BabelJS and MDN. However, I acknowledge that there may be more information out there regarding the ES6 Spec that I have not yet explored. I am curious about whether ES6 supports multiple inheritance ...

javascriptecmascript-6

Updating numerous records with varying values

Utilizing jQuery UI's sortable feature (source) allows me to rearrange elements effortlessly. By implementing custom callbacks, I can generate a list of these elements, assigning each a new position ID as I move them around. The resulting list may app ...

javascriptnode.jsmongodbmongoose

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

javascriptjqueryhtmlcss

Tips for successfully implementing a basic JQuery code in Internet Explorer

Having trouble getting this to work on my website, especially in Internet Explorer. Check it out here: http://jsfiddle.net/b43hj/24/ Any tips on how to make it compatible with all browsers? Thank you edit - I've only used the code from the jsfidd ...

javascriptjqueryhtml

Having difficulty loading the controller into my AngularJS module

I've been attempting to organize my angularjs controllers into separate files without success. Folder Structure: --public-- --js/controller/resturant.js --js/master.js --index.php Content of master.js angular.module("rsw",[ ...

javascriptangularjsmodel-view-controllerangularjs-controller

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

javascriptcsshtml

Leveraging ES6 in Vue.js

I have been considering picking up Vue.js as my next skillset. A friend mentioned that it's important to have a good understanding of ES6 before diving into Vue.js. I've asked around for advice, but I would love to hear more opinions on this matt ...

javascriptvue.jsecmascript-6

Toggle the play/pause function by clicking - Trigger Ajax

I have a campaign that can be either played or paused. Currently, I have implemented the pause feature using AJAX and now I need to add the play feature as well. When I click on the pause button, I want it to be replaced with the play button. This is the ...

javascriptjqueryajax

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

I'm currently working on a situation where I have the following code: <div ng-repeat="i in MediaFeedItems | filter: { category: 'userSelect' }" class="mediafeed--item"> This specific code snippet is responsible for iterating through ...

javascripthtmlangularjs

I'm seeking guidance on handling complex relationships with Mongoose. Please provide a specific challenge example for a quick solution. Thank you

While I am skilled in using sequelize with node, angular, express etc., I am just beginning to delve into the M part of the MEAN stack by learning mongoose. However, I'm unsure of MongoDB's capabilities when it comes to organizing data in the dat ...

javascriptnode.jsmongodbmongoosedatabase

Connecting a button's action to a specific element in an array using AJAX and Firebase

I am currently working on a project that involves making an AJAX request from a social API and then appending the results with a button inside the div. This button is meant to save the corresponding item in the array to my Firebase database. For brevity, ...

javascriptarraysajaxfirebase

The challenge with the mousewheel function in THREE.js Editor

Attempting to create a basic scene in the THREE.js Editor. Using the built-in Script editor, all control functions seem to be functioning correctly except for the mousewheel (I've tried mousedown, mousemove, etc.). I even attempted to add a listener ...

javascriptthree.jseditormousemousewheel

Unable to retrieve valid inputs from text fields by utilizing jQuery selectors

Extracting information from text fields is my goal. Specifically, these fields contain dates which consist of three parts: the year, month, and day. The dates are divided into two sections - the first date and the last date, serving as boundaries for a sea ...

javascriptjqueryjquery-selectors

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

jQuery Datatables causing hyperlinks to malfunction on webpage

After implementing jQuery datatables on this example using a PHP serverside processing file pulling data from MySQL, the Sign-in button used to work but now it just reloads the same index page. Manually typing in the address linked to the Sign In page work ...

javascriptphpmysqldatatables

Issues with $.getjson and trouble with storing JSON data

My current issue involves attempting a getJSON call to a page on my domain that contains a simple JSON array. However, the script in my webpage is not returning anything as expected. <script> $('#genButton').click(function() { ...

javascriptjqueryjson