How to use vue2.0 to implement real-time retrieval and update of the input box on the mobile terminal-JS Tutorial-php.cn

How to use vue2.0 to implement real-time retrieval and update of the input box on the mobile terminal

php中世界最好的语言

Release： 2018-05-31 09:52:21

Original

1819 people have browsed it

This time I will show you how to use vue2.0 to realize real-time retrieval and update of the input box on the mobile terminal. What are the precautions?, the following is the actual combat Let’s take a look at the case.

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

Copy after login

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!