Detailed explanation of the steps to implement real-time retrieval and update list of mobile terminal input box in vue2.0

This time I will bring you a detailed explanation of the steps to implement real-time retrieval and update list of the mobile input box in vue2.0. What are the precautions for vue2.0 to implement real-time retrieval and update list of the mobile input box. The following are Let’s take a look at practical cases.

Recently, while working on a vue2.0 project, I encountered the effect of a real-time search and update list on the mobile terminal. When the user enters the customer's phone number or name in the search box, the customer list content 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 changes in the value content of the input box. If the content is updated, the inputFunc function will be called~~

js:

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

queryData();

The second parameter here is false because queryData() will make a data request, and then render the matching data.

After the data request is successful, we control this request through the isConcat (whether to splice the

array) parameter Is the incoming data spliced ​​into the original customerlist array or directly replacing 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, so at this time

Parameters of the functionisConcat=false

Note: I will 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 splice the array, that is, splicing the data to achieve the merger of the new data and the old data.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

php curl batch control concurrent asynchronous operations

PHP MySQL makes message queue function (with code )

The above is the detailed content of Detailed explanation of the steps to implement real-time retrieval and update list of mobile terminal input box in vue2.0. For more information, please follow other related articles on the PHP Chinese website!