Add, delete, modify, and query vue, and add, delete, and modify vue
We save the user informationlist
In 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.list
But it does not directly output the list to the loop. Instead, it first returns the data in the list to an array.slist
slist
Loop 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.
ProvidesetSlist
To 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-for
Render 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 userspush
Method to add user informationlist
At 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 isselectedlist
In 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 variablesisActive
To 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 isslist
To 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,searchlist
To display words that may be searched at the bottom of the input box,ss
The array stores the filtered data. After the loop is completed, set the callsetSlist
Method 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.