combine arrays with the same name from same object into a single object with all items-CodePudding

I'm new with Vue and I am not really sure it's possible to generate what I want, But I have this structure :

{
  "items":[
    {
      "total":1287,
      "currency":"USD",
      "name":"string",
      "itemID":"",
      "product":{
        "code":"3425",
        "name":"product one"
      },
      "fabrics":[
        {
          "code":"123",
          "name":"cotton",
          "status":"Verified",
          "vendors":[
            {
              "name":"sameVendor",
              "value":"vendor 1",
              "type":"",
              "description":"string"
            },
            {
              "name":"sameVendor",
              "value":"vendor 2",
              "type":"",
              "description":"string"
            },
            {
              "name":"sameVendor",
              "value":"vendor 3",
              "type":"",
              "description":"string"
            },
            {
              "name":"differentVendor",
              "value":"extra vendor",
              "type":"number",
              "description":"string"
            }
          ]
        },
        {
          "code":"345",
          "name":"polyester",
          "status":"confirmed",
          "vendors":[
            {
              "name":"vendorNumber",
              "value":123456,
              "type":"number",
              "description":"string"
            }
          ]
        }
      ]
    },
    {
      "total":1277874,
      "currency":"USD",
      "name":"string",
      "itemID":"",
      "product":{
        "code":"2452",
        "name":"product 2"
      },
      "fabrics":[
        {
          "code":"654",
          "name":"wool",
          "status":"original",
          "vendors":[
            {
              "name":"vendorDate",
              "value":"date",
              "type":"date",
              "description":"string"
            }
          ]
        }
      ]
    }
  ]
}

<template>
    <div>
  </div>
</template>

<script>
export default {
  name: "renderBasedOnFabrics",
  data() {
    return {
      vendors: []
    };
  }
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

What i want to achieve is for each object in items, for each object in fabrics to display a div with code and name if the vendors name are the same value, and if not if it's type number to display an input number instead.
i think i know how to loop in html using v-for, but i'm not really sure how can i get the vendors with the same name for fabrics vendors in each object in item array and create a rule in html based on that.

do i need to manipulate the items array first, and somehow save a new structure in data(), and after use the new array in html with v-for?

i'm really new with vue and don't know exactly what is the best approach or if it's possible to get what i want.

the outcome should be something like this :

<div>
 cotton 123 
 <div> sameVendor : vendor 1, sameVendor: vendor 2, sameVendor: vendor 3</div>
 <input type="number" id="differentVendor" name="extra vendor"
      >
</div>
<div>
  wool 654
  <div> vendorDate: date </div>
</div>

CodePudding user response：

As per my understanding, You want to make the input elements dynamically based on the type. If type is an empty string then it will be a normal label else it will create an input field based on the type. If Yes, Here is the live demo :

new Vue({
  el: '#app',
  data: {
    allData: {
      "items":[
        {
          "total":1287,
          "currency":"USD",
          "name":"string",
          "itemID":"",
          "product":{
            "code":"3425",
            "name":"product one"
          },
          "fabrics":[
            {
              "code":"123",
              "name":"cotton",
              "status":"Verified",
              "vendors":[
                {
                  "name":"sameVendor",
                  "value":"vendor 1",
                  "type":"",
                  "description":"string"
                },
                {
                  "name":"sameVendor",
                  "value":"vendor 2",
                  "type":"",
                  "description":"string"
                },
                {
                  "name":"sameVendor",
                  "value":"vendor 3",
                  "type":"",
                  "description":"string"
                },
                {
                  "name":"differentVendor",
                  "value":"extra vendor",
                  "type":"number",
                  "description":"string"
                }
              ]
            },
            {
              "code":"345",
              "name":"polyester",
              "status":"confirmed",
              "vendors":[
                {
                  "name":"vendorNumber",
                  "value":123456,
                  "type":"number",
                  "description":"string"
                }
              ]
            }
          ]
        },
        {
          "total":1277874,
          "currency":"USD",
          "name":"string",
          "itemID":"",
          "product":{
            "code":"2452",
            "name":"product 2"
          },
          "fabrics":[
            {
              "code":"654",
              "name":"wool",
              "status":"original",
              "vendors":[
                {
                  "name":"vendorDate",
                  "value":"date",
                  "type":"date",
                  "description":"string"
                }
              ]
            }
          ]
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, i) in allData.items" :key="i">
    <div v-for="(fabricItem, j) in item.fabrics" :key="j">
      <h3>{{ fabricItem.name }} {{ fabricItem.code }}</h3>
      <div v-for="(vendorItem, k) in fabricItem.vendors" :key="k">
        <span v-if="!vendorItem.type">{{ vendorItem.name }} : {{ vendorItem.value }}</span>
        <input v-if="vendorItem.type" :type="vendorItem.type" :id="vendorItem.name" v-model="vendorItem.value"/>
      </div>
    </div>
  </div>
</div>