After using the v-for, delete the item in the list, view rendering error

Problem Description

Using the v-for rendering the list, with a key index

<tr v-for="(item,index) in list" :key="index">
     <td>{{item.label}}</td>
     <td>
         <input type="button" value="删除" @click="do_delete(index)">
     </td>
 </tr>

After you remove one of them, view rendering error

2 Cause

When rendering the page, vue to recognize DOM elements by key, so to ensure that each key is unique and will not change .

To delete an item in the list, it can lead to the term after the index changes (all minus one). It can not be used as an index Key .