时间戳

首页 > 解决方案 > Laravel + Vue Js中输入字段为空时如何清除自动完成结果？

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

问题描述

请在自动完成搜索栏上工作，如果输入字段为空，请清除搜索。目前，能够显示结果，但当我清除该字段时，我仍然在我的 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;
    }

标签： laravelvue.js

解决方案

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

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

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

推荐阅读