vue滑动取消收藏效果

<div id="app">
   <div class="container">
    <ul>
      <li class="list-item " v-for="(item,index) in tableData " data-type="0" id="list-item">
        <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip(item.course_id,item.type)">
          <div class="list-img">
            <img :src="item.upload_img" alt="">
          </div>
          <div class="list-content">
              <p class="title">{{item.name}}</p>
              <p class="tips"><span>{{item.date}}</span><i></i><span>{{item.address}}</span></p>
          </div>
        </div>
        <div class="delete" @click="deleteItem()" :data-index="index">
          <div class="delete_Img"></div>
          <span>取消收藏</span>
        </div>
      </li>
    </ul>
  </div>
</div>

body{
  width:100%;
  list-style: none;
  text-decoration: none;
  margin:0;
}
p{
  margin:0 0;
}

.container ul{
  overflow: hidden;
  width:100%;
  list-style-type: none;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}
.list-item{
    position: relative;
    height: 87px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    font-size:20px;
}
.list-item[data-type="0"]{
    transform: translate3d(0,0,0);
}
.list-item[data-type="1"]{
    transform: translate3d(-100px,0,0);
}
.list-item:after{
    content: " ";
    position: absolute;
    left: 0px;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ccc;
    color: #ccc;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
}
.list-box{
    padding: 11px 15px;
    background: #fff;
    display: flex;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0;
}
.list-item .list-content{
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    margin-left:15px;
    height:66px;
}
.list-item .title{
    display: block;
    color: #333;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin:6px 0;
}
.list-item .tips{
    display: block;
    overflow: hidden;
    font-size: 12px;
    color: #999;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-item .time{
    display: block;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 0.1rem;
    color: #666;
}
.list-item .delete{
    width: 100px;
    height: 87px;
    background: #F2F2F2;
    font-size: 17px;
    color: #fff;
    text-align: center;
    line-height: 80px;
    position: fixed;
    top:0;
    right: -100px;
} 
.list-img {
  width:20%;
  height:54px;
} 
.list-img img{
  width:100%;
  display: block;
  height:100%;
}

var testVue = new Vue({
    el:'#app',
    data(){
        return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
            upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
            upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
            upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
            upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }]
      }
    },
    methods : {
      //滑动开始
    touchStart(e){
      this.startX = e.touches[0].clientX;
    },
    //滑动结束
    touchEnd(e){
      let parentElement = e.currentTarget.parentElement;
      // console.log(parentElement)
      this.endX = e.changedTouches[0].clientX;
      // console.log(this.endX )
      if( parentElement.dataset.type == 0 && this.startX - this.endX > 30  ){
        console.log()
        this.restSlide();
        parentElement.dataset.type = 1;
      }
      if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;

    },
    //判断当前是否有滑块处于滑动状态
    checkSlide(){
      let listItems = document.querySelectorAll('.list-item');
      for( let i = 0 ; i < listItems.length ; i++){
        if( listItems[i].dataset.type == 1 ) {
          return true;
        }
      }
      return false;
    },
    //一次只能滑动一个
    restSlide(){
      let listItems = document.querySelectorAll('.list-item');
      for( let i = 0 ; i < listItems.length ; i++){
        listItems[i].dataset.type = 0;
      }
    },
    deleteItem(){
      var list = document.getElementById('list-item')
      console.log(list)
      list.remove()
    }
    }
 });