时间戳

首页 > 解决方案 > 如果再次单击路线链接，如何清除搜索字段

laravel - 如果再次单击路线链接，如何清除搜索字段

问题描述

我对 laravel 和 Vue.js 都很陌生。我遇到了一个错误/不便。我感谢您的帮助。

问题：

  1. 用户点击侧边栏中名为“Product”的链接，Product.vue 文件加载页面内容 div 中的产品列表。

  2. 有一个搜索栏可帮助用户搜索特定产品。

  3. 现在它显示了与搜索字符串匹配的产品列表，但页面的 url 仍然是相同的。

  4. 现在....如果用户点击返回原始链接。它不会重置搜索字段，因为即使在进行搜索时，URL 也不会改变。

Laravel 导航视图文件 :: nav.master.blade

<router-link to="/Product" class="nav-link">
<i class="fas fa-users nav-icon"></i>
<p>Products</p>
</router-link>

路由/父组件

let routes = [  
  { path: '/product', component: require('./components/Product.vue').default },  
];

const router = new VueRouter({
    mode: 'history',
    routes 
});

const app = new Vue({
    el: '#app',
    router,
    data:{
      search: ''
    },
    methods:{
      searchit: _.debounce(() => {
        Fire.$emit('searching');
      }, 1000)
    }
});

产品.vue

export default
{
data(){
   return{
      products:{}
   }    
},
created() {
   this.loadProducts();

    Fire.$on('searching', () => {
       let query = this.$parent.search;
       axios.get('/api/findProduct?q=' + query )
           .then( ({data}) => {
               this.products= data;
            })
           .catch(()=>{

          });
       })
   }    
}

如何重置搜索字段。当用户单击导航时。

谢谢

标签： laravelvue.js

解决方案

我建议你使用 EventBus 模式

见https://alligator.io/vuejs/global-event-bus/

事件总线.js

import Vue from "vue";
export const EventBus = new Vue();

Laravel 导航视图文件 :: nav.master.blade

<router-link to="/Product" class="nav-link" v-on:click.native="reloadProducts()">
  <i class="fas fa-users nav-icon"></i>
  <p>Products</p>
</router-link>

<script>
  import { EventBus } from "../event-bus.js";      

  methods: {
     reloadProducts() {
       console.log("Event close");
       EventBus.$emit("loadProducts");
    }
  }
};


</script>

产品.vue

import { EventBus } from "../../event-bus.js"; //Import event Bus

export default
{
  data(){
    return{
       products:[] // Change by array
 }    
},
created() {
   this.loadProducts();

   //listen event loadProducts
    EventBus.$on("loadProducts", () => {
      this.loadProducts();
     });

   Fire.$on('searching', () => {
      let query = this.$parent.search;
   axios.get('/api/findProduct?q=' + query )
       .then( ({data}) => {
           this.products= data;
        })
       .catch(()=>{

      });
   })
  }    
}

推荐阅读