How to use the Vue--findIndex method

principle:

// get subscript according to id
// By default, traverse the list collection and pass each element in the collection into the function's item,
var index = this.list.findIndex(function(item){
//According to the id attribute in the item to determine whether the item is in the above id
//Corresponding data, if it returns a true, otherwise returns false, continue to traverse the following data, and so on
return item.id ==id; //If it returns true, the findIndex method will return the id corresponding to this item to the outside for acceptance
});

Example:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         #app {
 11             width: 600px;
 12             margin: 10px auto;
 13         }
 14
 15         .tb {
 16             border-collapse: collapse;
 17             width: 100%;
 18         }
 19
 20         .tb th {
 21             background-color: #0094ff;
 22             color: white;
 23         }
 24
 25 .tb td,
 26         .tb th {
 27             padding: 5px;
 28             border: 1px solid black;
 29             text-align: center;
 30         }
 31
 32         .add {
 33             padding: 5px;
 34             border: 1px solid black;
 35             margin-bottom: 10px;
 36         }
 37     </style>
 38 </head>
 39
 40 <body>
 41     <div id="app">
 42         <div class="add">
 43             编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text">
 44             <button @click="add">添加</button>
 45         </div>
 46         <div class="add">品牌名称：<input type="text"></div>
 47         <div>
 48             <table class="tb">
 49                 <tr>
 50 <th>number</th>
 51 <th>Brand Name</th>
 52 <th>Founded</th>
 53 <th>Operation</th>
 54                 </tr>
 55                 <tr v-if="list.length <= 0">
 56 <td colspan="4">No brand data</td>
 57                 </tr>
 58 <!-- When adding: key="index", all parameters must be written completely -->
 59                 <tr v-for="(item,key,index) in list" :key="index">
 60                     <td>{{item.id}}</td>
 61                     <td>{{item.name}}</td>
 62                     <td>{{item.ctime}}</td>
 63 <!-- When using vue to register events, we can't see it in the dom element -->
 64                     <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
 65                 </tr>
 66             </table>
 67         </div>
 68
 69     </div>
 70 </body>
 71
 72 </html>
 73 <script src="vue2.4.4.js"></script>
 74 <script>
 75 var vm = new Vue({
 76         el: "#app",
 77         data: {
 78             id: 0,
 79             name: '',
 80             list: [
 81                 { "id": 1, "name": "it", "ctime": Date() },
 82                 { "id": 2, "name": "白龙", "ctime": Date() }
 83             ]
 84         },
 85         methods: {
 86             add: function () {
 87 //Push id and name to the list array
 88                 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
 89             },
 90             del:function(id) {
 91                
 92 // Get the subscript according to the id
 93 // By default, traverse the list collection and pass each element in the collection into the function's item,
 94                 var index = this.list.findIndex(function(item){
 95 //According to the id attribute in the item to determine whether the item is in the above id
 96 //Corresponding data, if it returns a true, if it returns false, continue the traversal of the following data, and so on
 97 return item.id ==id; //If it returns true, the findIndex method will return the id corresponding to this item to the outside for acceptance
 98                 });
 99 // Delete the corresponding data in the list set according to the subscript
100 // splice (start to delete subscript, delete length)               
101                 this.list.splice(index,1);    
102             }
103         }
104     });
105
106 </script>

How to use the Vue--findIndex method

principle:

Example:

Guess you like