时间戳

首页 > 解决方案 > Vuetify 异步搜索一次只提交一个字符并且不连接字符

vue.js - Vuetify 异步搜索一次只提交一个字符并且不连接字符

问题描述

我有以下 vue 组件：

<template>
    <v-form ref="form" @submit.prevent="search">
        <v-row class="pa-0">
            <v-col cols="12" md="2" class="d-flex">
                <v-autocomplete
                    :items="projects"
                    item-value="id"
                    :item-text="item =>  `${item.number.number} ${item.name}`"
                    outlined
                    v-model="form.project_id"
                    label="Project number"
                    :search-input.sync="project"
                    dense
                    hide-details="auto"
                    class="align-self-center"
                    clearable
                />
            </v-col>
         </v-row>
       </v-form>
</template>

<script>
export default {
   watch: {
      project( value )
            {
                this.queryProjects( { search: '', number: value } );
            }
   },

   data()
   {
        return {
            project: '',
            projects: [],
            }
        },

     methods: {
            async queryProjects( search )
            {
                console.log(search);
                if(!search)
                {
                    return;
                }

                let response = await fetch(route('projects.search', search));
                this.projects = await response.json();
            },
    }
}
</script>

该组件应根据项目编号过滤项目。该queryProject功能被触发，但问题value出在project观察者身上。在输入每个数字后，自动完成字段将设置回null，因此它不会连接完整的项目编号。因此，如果您想搜索19320每个数字，则一一解析而不是整数。

当输入一个字符时，控制台中的输出如下：

标签： vue.jsvuejs2vuetify.js

解决方案

问题出在线路上

:item-text="item =>  `${item.number.number} ${item.name}`"

当更改为item-text="name"一切正常时。

相关的错误报告：https ://github.com/vuetifyjs/vuetify/issues/11370

推荐阅读