Vue—购物车添加与删除

Vue—购物车添加与删除

<template>
  <div id="app">
      <div class="row">
        <div class="col-sm-12 col-md-8">
          <table class="table">
  <thead>
    <tr>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">添加</th>
    </tr>
  </thead>
  <tbody v-for="item in arrays" :key="item.id">
    <tr>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td><button @click="tianjia(item)" class="btn btn-success btn-sm">+</button></td>
    </tr>
  </tbody>
</table>
        </div>
        <div class="col-sm-12 col-md-4">
            <table class="table">
  <thead>
    <tr>

      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">删除</th>
    </tr>
  </thead>
  <tbody v-for="option in basket" :key="option.id">
    <tr>
      <td>{{option.name}}</td>
      <td>{{option.age}}</td>
      <td><button @click="shanchu(option)" class="btn btn-success btn-sm">x</button></td>
    </tr>

  </tbody>
</table>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      basket:[],
      arrays: [{ name: "李经理", age: 19 }, { name: "吉文丽", age: 15 }]
    };
  },
  methods:{
      tianjia(item){
       this.basket.push({
          name:item.name,
          age:item.age
       })
      },
      shanchu(option){
        this.basket.splice(this.basket.indexOf(option), 1);
      }
  }
};
</script>

<style>
</style>