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 属性传递你的数组：

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

从 json 填充 V-select

1 个答案: