Question

我正在处理VueJs文件并尝试使用<v-select>所以我正在做的是：

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

我的分区是一个包含id和text的对象数组，但是当我进入我的页面时，我有<% getOptionLabel(option) %>而不是text值对于我的每个部门的价值

这是console.log(this.divisions)的屏幕截图：

所以这是我的代码：

 <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>。您可以在更改时发出事件以将标签更改为文本值，但请确保使用v-bind:label=text或速记:label=text

绑定到label属性

Answer 2

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

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

或者您可以使用不带vue绑定的html属性来完成此操作。

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

干杯

v-select不识别标签道具

2 个答案: