微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue 选择标签无法正常工作,因为它是可搜索的

如何解决Vue 选择标签无法正常工作,因为它是可搜索的

我正在使用带有分页和可搜索选项的 vue-select。当我在没有搜索的情况下点击选项时,标签道具(用户看到的)会显示正确的文本。

但是,当我搜索时,标签道具会显示值(我正在保存)而不是指定的文本。

如何让 v-select 在搜索显示“文本”而不​​是 code.value?

             <v-select
                v-model="primary_scenario_field"
                :options="paginated"
                :reduce="code => code.value"
                label="text"
                required
                searchable
                @search="handleVSelectSearch"
              >
               <li slot="list-header" class="pagination">
                  <b-button :disabled="!hasPrevPage" 
                    @click="handlePaginationClick('prevIoUs')"> 
                    PrevIoUs
                  </b-button>
                  <b-button :disabled="!hasNextPage" 
                    @click="handlePaginationClick('next')"> 
                    Next 
                  </b-button>
               </li>
            </v-select>

data ()
 {
      search: '',offset: 0,limit: 10,filtered: [],paginated: [],code_list: []
 },methods: {

   handlePaginationClick (direction){
      if(direction == 'next') this.offset = this.offset + 10;
      if(direction == 'prevIoUs') this.offset = this.offset - 10;
      this.$nextTick();
      this.paginated = this.paginateResults(this.filtered);
    },paginateResults (value){
      return value.slice(this.offset,this.limit + this.offset);
    },async handleVSelectSearch (query = ''){
      query = isstring(query) ? query.trim().toupperCase() : query.toupperCase();
      this.filtered = this.filterResults(query);
      await this.$nextTick();
      this.offset = 10;
      this.handlePaginationClick('prevIoUs');
    },filterResults (value){
      return this.code_list.filter(item => item.text.includes(value));
    },**this.code_list options are getting loaded like this (in an array):
    { text: `${response.a}: ${response.b}`,value: response.id }

解决方法

我最终取出 :reduce="code => code.value" 并在提交前手动解析它。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?