v-select doesn't recognize label prop

Question

I'm working on a VueJs file and try to use <v-select> so what I'm doing is that :

<v-select :options="divisions" label="text" ></v-select>

and my divisions is an array of object conatining id and text but when i'm going on my page I have <% getOptionLabel(option) %> instead of the text value for each one of my divisions value

here is a screenshot of console.log(this.divisions) :

So this is my code :

 <form id="MassUpdateDivisionForm">
       <v-select v-bind:label="text" :options="divisions"></v-select>
 </form>
<script>

 import vSelect from "js/vue-select/vue-select.js"
 export default {
    props: ['product'],
    components: {vSelect},
    data() {
        return {
            divisions: []
        }
    }
    methods: {
         getDivisions(){
             let self = this
            this.$http({
                url: 'divisions',
                method: 'get'
            }).then((response)=>{
                self.$set('divisions', response.data)
                console.log(self.divisions)
                //that's where I got the pic
                },(response)=>{
                alert('something went wrong')
                }
            )
        }
    },
    created () {
        this.getDivisions()
    },
}
</script>

Could you demonstrate the issue in a fiddle with some sample data? — Bert, Jul 19 '17 at 15:21

score 0 · Answer 1 · answered Jul 19 '17 at 15:08

0

If I am understanding you correctly, you want the text attribute of the selected option to be displayed as the label? If so, you will need to pass the data of the selected option back to the <v-select>. You can emit an event on change to change label to the text value, but make sure you bind to the label attribute using either v-bind:label=textor the shorthand :label=text

answered Jul 19 '17 at 15:08

aprouja1

1,800
8
17

Still not working. And yes i want to display the text prop – Sylvain Attoumani Jul 19 '17 at 15:11
Can you provide the rest of your code then? So we can attempt to recreate? – aprouja1 Jul 19 '17 at 16:40

jaumebalust · Answer 2 · 2018-09-10T09:13:50.057

0

I just had the same problem and solved it by passing the name of the label as a string.

<v-select :options="warehouses" :label="'name'"></v-select>

or you could do it with an html attribute without vue binding.

<v-select :options="warehouses" label="name"></v-select>

Cheers,

edited Sep 10 '18 at 09:13

answered Sep 10 '18 at 09:03

jaumebalust

300
3
9

v-select doesn't recognize label prop

2 Answers2