將來自同一物件的具有相同名稱的陣列組合成一個包含所有專案的物件

我是 Vue 的新手，我不確定是否可以生成我想要的東西，但我有這個結構：

{
  "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>

我想要實作的是對于專案中的每個物件，如果供應商名稱是相同的值，則對于結構中的每個物件，顯示一個帶有代碼和名稱的 div，如果不是，則顯示輸入數字的型別號。
我想我知道如何使用 v-for 在 html 中回圈，但我不太確定如何在專案陣列中的每個物件中獲得具有相同名稱的面料供應商的供應商，并基于此在 html 中創建規則。

我是否需要先操作 items 陣列，并以某種方式在 data() 中保存一個新結構，然后在 html 中使用 v-for 中的新陣列？

我真的是 vue 的新手，不知道什么是最好的方法，或者是否有可能得到我想要的。

結果應該是這樣的：

<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>

uj5u.com熱心網友回復：

根據我的理解，您希望基于type. 如果type是一個空字串，那么它將是一個普通標簽，否則它將input根據型別創建一個欄位。如果是，這里是現場演示：

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>

標籤：javascripthtmljsonVue.js

上一篇：Vuex：兩個組件使用同一個store模塊是一種不好的做法嗎？

下一篇：pta第一次博客