单击组合框上的类别时如何选择文本？ (Vue.JS 2)

Posted 2023-02-23

【中文标题】单击组合框上的类别时如何选择文本？ (Vue.JS 2)

【英文标题】：How can I get text selected when category clicked on combobox ? (Vue.JS 2)

【发布时间】：2017-08-16 23:25:13

【问题描述】：

我有一个像这样的 vue 组件：

<script>
    export default
        template: '\
            <select class="form-control" v-model="selected" v-on:change="search">\
                <option v-for="option in options" v-bind:value="option.id" v-bind:disabled="option.disabled"> option.name </option>\
            </select>',
        mounted() 
            this.fetchList();
        ,
        data() 
            return 
                selected: '',
                options: [id: '', name: window.trans.category.select]
            ;
        ,
        methods: 
            search(e)
                window.location = window.BaseUrl + '/search?q=&cat=' + e.target.value;
            ,
            fetchList: function() 
                this.$http.post(window.BaseUrl+'/category/list?parent_id=all').then(function (response) 
                    response.data.forEach(function(item)
                        this.options.push(id:item.id, name:item.name)
                    , this);
                );
            ,
        
    ;
</script>

点击类别时，我想获取类别的文本

在我上面的代码中，我使用这个：e.target.value 来选择 id 并且它可以工作

但是，如何在点击类别时选择文本？

我试试这个：e.target.text，但 id 不起作用

有没有人可以帮助我？

【问题讨论】：

这不是变量：selected ，你在v-model中使用的那个吗？

@Saurabh，我要收文。没有价值。如果我console.log(this.selected)，结果就是值

尝试使用 ` v-bind:value="option.name" `，让我知道。

@Saurabh，它有效。但是，是否没有其他方法可以获取文本。因为我还需要v-bind:value="option.id"来显示数据

【参考方案1】：

如果你想要id 和name，你可以试试这个：

    template: '\
        <select class="form-control" v-on:change="search">\
            <option v-for="option in options" v-bind:value="option.id"  @click="selected=option.name" v-bind:disabled="option.disabled"> option.name </option>\
        </select>',
    mounted() 
        this.fetchList();
    ,

【讨论】：

我该如何服用？我尝试console.log(this.selected)，结果是值 id。没有文字

好像不行。因为它在调用@click之前先调用运行v-on:change="search"

您是否遇到了一些错误，也有一些更正建议here。

我有一个更出色的解​​决方案，那就是使用 jquery。看看这个：$(".form-control option:selected").text()