How to bind v-model to v-select

0
votes

So I'm creating a web form with Vuejs / Vuetify and I need to provide an option for users to edit existing data. When I'm on the edit page, I have an "item" object with contains all the properties/values which the user can edit. I can bind these to v-text-field via v-model without issues. The problem comes when binding the existing value to a v-select component. it doesn't fill the v-select box with the value of the v-model it's bound to. It might also be worth noting that what I need to pass to the backend is the brand-id but what I need to show to the UI is the brand-name (string)

<v-select
 :items="brandOptions"
 :error-message="['Please select a brand']"
 required
 placeholder="Select a brand"
 item-text="brand"
 item-value="id"
 id="brand"
 v-model="product.brand"
></v-select>
2
vue.jsvuejs2vuetify.js
How your data looks? – Traxo
Haven't used vuetify, but made my own components. Seems to me that's always better to pass the product to to v-select and use the scoped slots to define your options in which way you want it. Also look at the return object prop for v-select, instead of the value so that you have freedom to choose which you want to send to the server. – memic84
I was able to solve this by requesting the php api to send the brand object (brand name and brand id) instead of the brand-name string only. – dcdcc

2 Answers

0
votes

This is my working example without v-model same sens, i just appointed value to data

Template

<v-select :onChange="initialPriceControll" :options="price_types"></v-select>`,
js: `export default {
  data() {
    return {
        price_type:'Fixed',
        price_types: [
            'Fixed',
            'Negotiable',
            'Giveaway'
        ],
        show_negotiable_price: false
    }
},
methods: {
    initialPriceControll(e){
        this.price_type = e;
        if (e == 'Negotiable') {
            this.show_negotiable_price = true
        } else {
            this.show_negotiable_price = false
        }
        this.$emit('selectPrice', { 
                display: this.show_negotiable_price,
                price_type: this.price_type
            });
    }
  }
}
0
votes

in template:

<v-select
  v-model="theModel"
  v-bind:items="['a', 'b', 'c', 'd']"
  label="theLabel"
 ></v-select>

in script:

data() {
  return {
    theModel: ""
  }
}