Laravel + Vue Js中输入字段为空时如何清除自动完成结果？答案

【问题标题】：How to clear auto complete results when input field is empty in Laravel + Vue Js?Laravel + Vue Js中输入字段为空时如何清除自动完成结果？
【发布时间】：2021-01-13 10:15:50
【问题描述】：

如果输入字段为空，请使用自动完成搜索栏并希望清除搜索。目前，能够显示结果，但当我清除该字段时，我仍然在我的 div 中看到搜索结果。当我清除搜索输入时，我希望 div 为空。请提供任何帮助

Vue 代码如下

<template>
    <div style="margin-top:8px">
        <input type="text" v-model="form.user" v-on:keyup="show" class="form-control">
        <div class="panel-footer" v-if="results.length">
            <ul v-for="result in results" :key="result.id">
                <li>{{result.name}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {

    data(){
        return{
            form:{
                user: ""
            },
            results: []

        }
    },

    methods:{
        show(){
            axios.post('/users', this.form).then((res)=>{
                this.results = res.data
            })
        }

    }
    
}
</script>

控制器

public function getUser(Request $request){
        $qry = $request->input('user');
        $all_user = DB::table('users')
        ->where("name", "like", "%" . $qry . '%')
        ->get();
        return $all_user;
    }

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

仅当results 数组有项目时才会呈现 div。因此，当this.form.user 为空时，您还应该重置this.results。您可以为此使用 watch 函数。

在data 和methods 之间添加此代码。

watch: {
  form: {
     handler(val){
        if(this.form.user == ""){
           this.results = [];
        }
     },
     deep: true
  }
}

【讨论】：