Question

 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中使用产品对象，而是使用对象属性product.stock_count具有整数值（例如5），现在我希望v-select的值从1到5。当0时为0 product.stock_count返回0。

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

请帮助我。

Answer 1

尝试一下：

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

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

Answer 2

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

如果您使用的对象

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

2 个答案: