vue中的列表项删除操作

Posted 2020-10-29 无花即无果

<script>
Vue({
  data: {
    orders: []
  },
  created() {
    $.get( {
      url: ‘orders‘,
      dataType: ‘json‘
   })
      .then( data => {
        this.orders = data;
      });
  },
  methods: {
    delete(index) {
      // 用索引删除
      this.orders.splice(index, 1);
    },
    deleteByID(id) {
      this.orders.splice(this.orders.find( order => {
        return order.id === id;
      }), 1);
    }
  }
});
</script>
<tr v-for="(order, index) in orders">
  <td>...</td>
  <td>
    <button type="button" @click="delete(index)">用索引删除</button>
    <button type="button" @click="deleteByID(order.id)">用 ID 删除</button>
  </td>
</tr>