Home > Article > Web Front-end > Explanation of vue addition, deletion, modification and query
We save these user information into the array of list
, and then add, delete, modify and check on this array:
list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', province: '河北省', hobby: ['弹琴', '读书', '插画'] }// ...]
The forms here include: text input boxes, radio buttons, select boxes, check boxes, etc.
Our data are all placed in the arraylist
, but here we do not directly output the list pairs in a loop, but first put the items in the list The data is given to an array slist
, and slist
is output in a loop. Because we need to filter the data in the subsequent query function, the array list always saves the original data (including new, modified, or deleted), while the array slist is only responsible for display.
Provide a setSlist
method in vue and give the data to be displayed to the array slist:
// 获取需要渲染到页面中的数据setSlist(arr) {this.slist = JSON.parse(JSON.stringify(arr)); }
Then use ## in html #v-forRender the slist array:
<tr v-cloak v-for="(item, index) of slist"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td> </tr>In the operation column, bind events to the modification and deletion operations. 2. Adding and deleting functions Merging adding functions and deleting them together makes these two functions relatively simple . When adding a user, use the
push method to add the user's information to the end of the
list array:
this.list.push({ username: 'ffff', email: 'fffffff@163.com', sex: '女', province: '河南省', hobby: ['弹琴', '插画'] });This way You can add a user of ffff. When deleting a user, you can delete the data at the index position through
splice(index, 1), and the data on the page will be automatically updated.
selectedlist, then every time you modify it, give the data at the index position to the selectedlist, and then in the popup Modify the selectedlist in the layer. We can also see the types of modified data: text box (user name, email), radio button (gender), select box (province), multi-select box (hobby), here we mainly practice form processing ( ). Whether the pop-up layer is displayed is controlled by the variable
isActive:
// 修改数据modifyData(index) {this.selected = index; // 修改的位置this.selectedlist = this.list[index];this.isActive = true; }Have you found a problem? When the information in the pop-up layer is modified, the data in the table is also synchronized. updated. But we ourselves want to save the data in the pop-up layer to the table when we click the save button. The root of the problem lies here:
this.selectedlist = this.list[index];Because
list[index] is an Object type data, if = assignment is used, the assignment operation is a shallow copy (Assign the address of the data to the corresponding variable instead of copying the specific data to the variable. The variable will change with the change of the data value.) Selectedlist and list[index] use the same data address and cause each other to change the data value. So here we need to perform a deep copy:
this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串,然后再转换When the user modifies the data, the selectedlist will change. When the save button is clicked, the data will be re-saved to the index position:
/* this.list 数据数组 this.selected 刚才修改的位置 this.selectedlist 需要保存的数据*/Vue.set(this.list, this.selected, this.selectedlist);4. Query functionAs we have said in Section 1, the data in
slist is displayed in the page table for convenience Execute the query operation:
// 获取需要渲染到页面中的数据setSlist(arr) {this.slist = JSON.parse(JSON.stringify(arr)); }Each time, the filtered data is assigned to the slist array according to certain conditions, and the queried data is displayed. Here our query implements two small functions:
<input type="text" placeholder="search" @input="search" list="cars" class="search"> <datalist id="cars"> <option v-for="item in searchlist" :value="item"></option> </datalist>implementation of the search function,
searchlist is the input The words that may be searched are displayed below the box, and the
ss array stores the filtered data. After the loop is completed, set the
setSlist method to modify the slist array:
The above is the detailed content of Explanation of vue addition, deletion, modification and query. For more information, please follow other related articles on the PHP Chinese website!