vue滑动删除某个元素的问题？

Question

想单独删除某个元素，为什么每次向左滑动 整个UI列表都暴露出删除按钮

<ul>
          <transition-group name="slide-fade">       
            <li v-for = '(food,index) in selectFoods' class="cartList slide-warp" :key="food.name" ref="slideWarp">
              <div style="float: left;" class="slide-item" :data-index="index">{{food.name}}</div>
              <div class="cartControl">
                <span @click = "addFood(food)" class="addFood">+</span>
                <b>{{food.count}}</b>
                <span @click = 'decreaseFood(food)' class="decreaseFood">-</span>
                <span>价格：¥{{food.count * food.price}}</span>
              </div>
              <div class="slide-del">删除</div>
            </li>
          </transition-group>
        </ul>

Answer 1

你的事件绑定有问题，应该在光标锁定以后滑动才现实删除。你这个是滑动就现实，所以你滑动的时候不管在哪滑只要是LI表内就全部触发。