将 html <select> 和 <option> 重新编码为 vuetify <v-select>

Posted 2023-02-22

【中文标题】将 html <select> 和 <option> 重新编码为 vuetify <v-select>

【英文标题】：Recode a html <select> and <option> into vuetify <v-select>

【发布时间】：2020-03-10 05:23:08

【问题描述】：

 Quantity:
      <select>
        <option value="0">0</option>
        <option
          :value="x"
          v-for="x in product.stock_count"
          :key="x"
          :selected="x == product.quantity"
        >x</option>
      </select>

这里，product.stock_count 是存货总数的整数值，product.quantity 是选择的要更新的数量。我想建立相同的选择 使用 vuetify v-select 进行控制 https://vuetifyjs.com/en/components/selects#api

不直接在 v-select 中使用产品对象，使用具有整数值（例如 5）的对象属性 product.stock_count，现在我希望 v-select 具有从 1 到 5 的值。并且 0 时product.stock_count 返回 0。

 <v-select :items="items"></v-select>
<script>
  export default 
    data: () => (
      //items: [from zero to product.stock_count],
    ),
  
</script>

请帮帮我。

【参考方案1】：

<template>
    <v-select
    v-model="selected"
    :items="products"
    label="Standard"
    item-text="name"
    item-value="id"
    return-object
    ></v-select>
</template>
<script>
    export default 
        data: () => (
            products: [],
            selected:id:1,stock_count:5,quantity:5,name:'Product 1'
        ),
        methods:
            getproductAPI()
                this.products= [
                
                    id:1,
                    stock_count:5,
                    quantity:5,
                    name:'Product 1'
                ,
                
                    id:2,
                    stock_count:10,
                    quantity:10,
                    name:'Product 2'
                ,

                ]
            ,
        ,
        mounted()
            this.getproductAPI()
        

    
</script>

如果你使用对象

【讨论】：

不直接在 中使用对象，使用具有整数值（例如 5）的对象属性 product.stock_count，现在我希望 具有值从 1 到 5。当 product.stock_count 返回 0 时为 0。

【参考方案2】：

试试这个：

<v-select 
  :items="items"
  v-model="selection"
>
</v-select>
...
selection: 0

如果您有其他数据（根据您想要显示的 product. stock_count/quantity 似乎如此，您可以使用 item-text, item-value 道具。

【讨论】：

我想将 v-select 项映射到从 0 到 product.stock_count 的所有整数，并且选择的整数将更新为 product.quantity。

在created 上设置一个数据属性（items，如果你愿意的话），它会执行类似于this.items = [...Array(this.product.stock_count).keys()] 的操作，那么你将拥有一个更新数量的@change="updateQuantity"。