填充V-select from json

Question

我在填充我从后端收到的JSON中的v-select时遇到了问题。我对vuetify是个新手，网上分享的一些解决方案让我很困惑。

这是我的JSON

{
        "id": 2,
        "quantityOnHand": 7,
        "idealQuantity": 10,
        "product": {
            "id": 2,
            "createOn": "0001-01-01T00:00:00",
            "updateOn": "0001-01-01T00:00:00",
            "name": "10LB Dark Roast",
            "description": "10LB of Dark Roast Coffee Beans",
            "price": 67.0,
            "isTaxable": true,
            "isArchived": false
        }
    },
    {
        "id": 1,
        "quantityOnHand": 48,
        "idealQuantity": 10,
        "product": {
            "id": 1,
            "createOn": "0001-01-01T00:00:00",
            "updateOn": "0001-01-01T00:00:00",
            "name": "10LB Light Roast",
            "description": "10LB of Light Roast Coffee Beans",
            "price": 67.0,
            "isTaxable": true,
            "isArchived": false
        }
    },

这是我的Vuejs前端代码：

                    <template v-slot:[`item`]="{ inventory }">
                      <v-select
                        :items="inventory.product.name"
                        label="Product Receive"
                      ></v-select>
                    </template>

这是我正在使用的脚本(Typescript)，这可能与它有关。

  inventory: IProductInventory[] = [];

  async intialize() {
    this.inventory = await inventoryService.getInventory();
    await this.$store.dispatch("assignSnapshots");
  }
  async created() {
    await this.intialize();
  }

这是IProductInventory和IProduct的接口

export interface IProduct {
  id: number;
  createdOn: Date;
  updatedOn: Date;
  name: string;
  description: string;
  price: number;
  isTaxable: boolean;
  isArchived: boolean;
}

export interface IProductInventory {
  id: number;
  product: IProduct;
  quantityOnHand: number;
  idealQuantity: number;
}

Answer 1

您应该通过items prop传递数组：

<v-select
  label="Product Receive"
  :items="inventoryItems">
</v-select>

对于inventoryItems，您可以使用计算属性：

computed: {
  inventoryItems () {
    return yourArray?.map(inventory => ({
      text: inventory.product.name,
      value: inventory.product.id
    }))
  }
}

有关更多详细信息，请参阅v-select API。