CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsnuxt.jsv-select
Anik Adhikary
Anik Adhikary

Reputation: 71

Recode a html <select> and <option> into vuetify <v-select>

 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>

Here, product.stock_count is holding the integer value for the total number of stock amount, and product.quantity is the selected quantity which is to be updated. I want to build the same selection control with vuetify v-select https://vuetifyjs.com/en/components/selects#api

Not using product object directly in the v-select, using an object property product.stock_count which has an integer value (eg. 5), now I want the v-select to have values from 1 to 5. And 0 when the product.stock_count returns 0.

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

kindly help me out.

Upvotes: 1

Views: 2680

Answers (2)

idirsun
idirsun

Reputation: 604

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

if your using object

Upvotes: 2

Michael
Michael

Reputation: 5048

try this:

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

If you have other data (which it seems so based on your product. stock_count/quantity that you want to display you can use the item-text, item-value props.

Upvotes: 0

Related Questions