vue.js - 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>

Answer 1

我只是遇到了同样的问题，并通过将标签名称作为字符串传递来解决它。

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

或者您可以使用没有 vue 绑定的 html 属性来完成。

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

干杯，

Answer 2

如果我对您的理解正确，您希望将所选选项的文本属性显示为标签吗？如果是这样，您将需要将所选选项的数据传递回<v-select>. 您可以在更改时发出事件以将标签更改为文本值，但请确保使用其中一个v-bind:label=text或简写绑定到标签属性:label=text