Question

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

问题：

用户单击侧栏中的“产品”链接，Product.vue文件将在页面的内容div中加载产品列表。
有一个搜索栏，可帮助用户搜索特定产品。
现在显示的是与产品匹配的搜索字符串的列表，但页面的网址仍然相同。
现在...。如果用户单击返回原始链接。它不会重置搜索字段，因为即使进行搜索，URL也不会更改。

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

TWithoutProvidedKey

路由/父级组件

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

Product.vue

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)
    }
});

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

谢谢

Answer 1

我建议您使用模式EventBus

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

event-bus.js

SQL> with test (text_value) as
  2    (select '23.04.2019' from dual union all
  3     select '04-2019-23' from dual union all
  4     select '04 April 2019' from dual
  5    )
  6  select to_date(text_value, 'dd.mm.yyyy') result from test
  7  where text_value = '23.04.2019'
  8  union all
  9  select to_date(text_value, 'mm-yyyy-dd') from test
 10  where text_Value = '04-2019-23'
 11  union all
 12  select to_date(text_value, 'dd month yyyy', 'nls_date_language=english')
 13  from test
 14  where text_value = '04 April 2019'
 15  /

RESULT
----------
23/04/2019
23/04/2019
04/04/2019

SQL>

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

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

Product.vue

<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>

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

1 个答案: