So implementieren Sie mit vue2.0 den Echtzeitabruf und die Aktualisierung des Eingabefelds auf dem mobilen Endgerät

Dieses Mal zeige ich Ihnen, wie Sie mit vue2.0 den Echtzeitabruf und die Aktualisierung des Eingabefelds auf dem mobilen Endgerät realisieren. Was sind die Vorsichtsmaßnahmen und das Folgende ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.

Kürzlich bin ich bei der Arbeit an einem vue2.0-Projekt auf den Effekt der Echtzeitsuche und Aktualisierungsliste auf dem mobilen Endgerät gestoßen, wenn der Benutzer die Telefonnummer oder den Namen des Kunden in das Suchfeld eingibt Der Inhalt der Kundenliste wird entsprechend aktualisiert >Verwenden Sie

, um den Wertinhalt des Eingabefelds zu überwachen. Wenn sich der Inhalt ändert, wird die Funktion inputFunc aufgerufen~~

js:

Schreiben Sie die Funktion inpuFunc in die Methode method von vue, um das Eingabefeld abzurufen. Der Wert value wird dann an die Funktion übergeben, die die Kundenliste rendert.

v-on:input ="inputFunc" Der zweite Parameter ist hier falsch, da queryData() erstellt wird eine Datenanforderung und rendern Sie dann die passenden Daten,

Nachdem die Datenanforderung hier erfolgreich war, steuern wir über den Parameter isConcat (ob das

Array

gespleißt werden soll). ​​in das ursprüngliche Kundenlisten-Array oder ersetzt direkt die Daten im Kundenlisten-Array,

Da die zu diesem Zeitpunkt angezeigten Daten übereinstimmen, müssen die Daten im Array ersetzt werden, also zu diesem Zeitpunkt

Die Parameter der FunktionqueryData();

Hinweis: Lassen Sie mich einen kurzen Blick auf die Struktur dieser Kundenlistendarstellung und die Datenstruktur werfen

Struktur: isConcat=false

Datenstruktur:

Hier handelt es sich bei Zeilen um ein Array. Verwenden Sie daher diese Daten, um das Array mithilfe der Concat-Funktion in js zu verbinden, dh um die Daten zu verbinden, um diese neue Datenzusammenführung alter Daten zu erreichen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie vue.js zum Bearbeiten von Rezepten

So verwenden Sie das serverseitige Rendering von React

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit vue2.0 den Echtzeitabruf und die Aktualisierung des Eingabefelds auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!