Explanation of vue addition, deletion, modification and query-JS Tutorial-php.cn

Explanation of vue addition, deletion, modification and query

巴扎黑

Release： 2017-07-18 17:40:40

Original

1882 people have browsed it

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: ['弹琴', '读书', '插画']
    }// ...]

Copy after login

The forms here include: text input boxes, radio buttons, select boxes, check boxes, etc.

1. Display data

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));
}

Copy after login

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>

Copy after login

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: ['弹琴', '插画']
});

Copy after login

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.

3. Modification function

Assume that the data in our popup layer is

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;
}

Copy after login

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];

Copy after login

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]) ); // 先转换为字符串，然后再转换

Copy after login

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);

Copy after login

4. Query function

As 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));
}

Copy after login

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:

After the user enters a certain character, a list of words that the user may want to query (such as user name) is automatically displayed in a list below the input box etc.)
Synchronously update the data in the table

Here we query by user name and email, so when filtering data, we need to detect the user Whether the name and email address contain the queried word. We first bind an input event to the input box, and use datalist to display the words that the 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>

Copy after login

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:

Whenever the user enters or deletes a character, the search method is called to perform the query operation. When the word list is displayed with a click, the search method is also called.

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!