Add, delete, modify, and query vue, and add, delete, and modify vue

Add, delete, modify, and query vue, and add, delete, and modify vue

We save the user informationlistIn the array, add, delete, modify, and query on the array:

List: [{username: 'aaaaa', email: '2017 @ qq.com ', sex: 'male', province: 'beijing', holobby: ['basketball ', 'reading', 'programmer']}, {username: 'bbbbbb', email: 'bbbbbbb @ 163.com ', sex: 'female', province: 'hebei province ', holobby: [play the piano, read, and illustration]} //...]

The following forms are available: text input box, single choice button, select choice box, and check box.

1. Display Data

Our data is stored in arrays.listBut it does not directly output the list to the loop. Instead, it first returns the data in the list to an array.slistslistLoop output. Because we need to filter the data in the subsequent query function, the array list keeps the original data (including new, modified, or deleted), and the array slist is only responsible for display.

ProvidesetSlistTo display the data to the array slist:

// Obtain the data to be rendered to the page. setSlist (arr) {this. slist = JSON. parse (JSON. stringify (arr ));}

Then usev-forRender the slist array:

<Tr v-cloak v-for = "(item, index) of slist "> <td> </td> <td> </td> <a href = "javascript :; "@ click =" showOverlay (index) "> modify </a> | <a href =" javascript:; "@ click =" del (index) "> Delete </a> </td> </tr>

In the operation column, bind events to the modification and deletion operations.

 

2. Added and deleted Functions

 

Combining the added and deleted functions is relatively simple.

Use when adding userspushMethod to add user informationlistAt the end of the array:

This. list. push ({username: 'ffffff', email: 'fffffff @ 163.com ', sex: 'female', province: 'henan province ', holobby: ['playing player ', 'illustrator ']});

In this way, you can add an ffff user.

When deleting a usersplice(index, 1)You can delete the data at the index position, and the data on the page is automatically updated.

3. Modify Functions

Assume that the data in the layer isselectedlistIn this case, the data at the index location is assigned to selectedlist, and then the selectedlist is modified in the pop-up layer. We can also see the data type modification: text box (user name, email), single-choice button (gender), select box (province), multiple-choice box (hobby ), here we mainly practice form processing (https://cn.vuejs.org/v2/guide/forms.html ). Whether the bullet layer displays variablesisActiveTo control:

// Modify the data modifyData (index) {this. selected = index; // modify the position this. selectedlist = this. list [index]; this. isActive = true ;}

Is there a problem? When the information in the bullet layer is modified, the data in the table is also updated synchronously. However, we want to save the data in the pop-up layer to the table only when the Save button is clicked. The root cause of the problem lies here:

this.selectedlist = this.list[index];

Becauselist[index]It is an Object-type data. If = is used, the value assignment operation is a simple copy (assign the data address to the corresponding variable instead of copying the specific data to the variable, variables change with the data value). selectedlist and list [index] use the same data address, causing each other to change the data value. Therefore, we need to make a deep copy:

This. selectedlist = JSON. parse (JSON. stringify (this. list [index]); // convert to a string before conversion

After you modify the data, selectedlist changes. Click the Save button to save the data to the index position again:

/* This. list data array this. selected the position modified just now this. selectedlist the data to be saved */Vue. set (this. list, this. selected, this. selectedlist );

4. Query

As we have already said in section 1st, what is displayed in the page table isslistTo facilitate the query operation:

// Obtain the data to be rendered to the page. setSlist (arr) {this. slist = JSON. parse (JSON. stringify (arr ));}

Each time the filtered data is assigned to the slist Array Based on certain conditions, the queried data is displayed. Here, our query implements two small functions:

The user name and email address are used for query. Therefore, when filtering data, you need to check whether the user name and email address contain the words to be queried. We first bind an input event to the input box and use datalist to display the words that a user may want to query:

<input type="text" placeholder="search" @input="search" list="cars" class="search"><datalist id="cars">    <option v-for="item in searchlist" :value="item"></option></datalist>

The implementation of the search function,searchlistTo display words that may be searched at the bottom of the input box,ssThe array stores the filtered data. After the loop is completed, set the callsetSlistMethod to modify the slist array:

Each time you enter or delete a character, the search method is called to perform the query operation. When you click to display the word list, the search method is also called.