vue2.0 — Real-time retrieval and update list of input box on mobile terminal

We are all alone in this world

                            — Nuan Nuan

Recently, when I was working on a vue2.0 project, I encountered the effect of searching and updating the list of actual facts on the mobile terminal. However, when the user enters the customer's phone number or name in the search box, the content of the customer list will be updated accordingly. Let me show you the picture below. ~·

html   

<input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc" >

Use v-on:input = "inputFunc" to monitor the content of the input box~~

 

 js：

Write the inpuFunc function in the method method of vue, get the value of the input box and pass it to the function queryData() that renders the customer list;

queryData() will make a data request, and then render the matching data,

After the data request is successful, we use the isConcat parameter to control whether the requested data is spliced ​​into the original customerlist array or directly replaces the data in the customerlist array.

So because the data displayed at this time is matched, the data in the array needs to be replaced, and isConcat=false when calling the function

 

 Remarks: Give you a brief look at the structure and data structure of this customer list rendering

structure:

data structure:

 

 

Here rows is an array, so use the concat function in js to splicing the data into the array, that is, splicing the data to realize the merging of the new data and the old data.

Conclusion: I personally feel that the idea of ​​​​vue implementation is more convenient~~