Vue Router - Handle Abfrageparameter

Question

Ich habe eine <search-bar> Komponente, die einige Dropdown haben, die ich als Filtersuche verwenden werde. Wenn ich drücken Sie die Taste submit laufen i den folgenden Code:

search() { 
    let query = { 
     status: this.selectedOrderStatus 
    }; 

    this.$router.push({ path: '/', query: query }) 
} 

meine url Dieser chage wird als: http://localhost:8080?status=1 oder http://localhost:8080?status=2 und es ist ok.

In einer anderen Komponente (dh die / Komponente) Ich habe Platz eine Uhr url Wechsel zu handhaben, wie folgt aus:

watch: { 
'$route': 'loadOrders' 
}, 

Also, wenn in meinem Drop-Down-i Wahl ein Wert ist, wird die Komponente neu geladen.

Aber, wenn ich auf URL bin http://localhost:8080?status=1 und ich drücke übermitteln Knopf nichts passiert. Ich muss einen anderen Wert wählen (zum Beispiel 2), um das Nachladen zu machen.

Wie kann ich das Nachladen jedes Mal handhaben, wenn ich den Submit-Knopf drücke? Denn ich möchte mit dem gleichen Parameter erneut auf "Senden" drücken.

Answer 1

Da Sie die Abfrageparameter beim Senden nicht ändern, erkennt Vue keine Änderungen und lädt Ihre Komponente nicht neu. Für Ihren Fall würde ich empfehlen, Ihre loadOrders direkt von wo Sie das Formular senden.

Senden Sie ein Ereignis, wenn Sie auf "Senden" klicken und versuchen, sich nicht auf die Route zu verlassen. https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication