Question

我正在尝试在v-for中滑动显示div。我目前正在按照这里的建议使用vue-touch。滑动事件有效，并且一切都会按预期进行，但是问题是当我滑动时，div在循环中的所有元素上显示。

我尝试使用jquery's find(), next()和siblings()，但它们似乎都不起作用。我想指出，$('.swipe-options-wrap')是我的选项组件的类。这是我的代码：

Part of my Vue component:

<v-touch v-for="(product) in products" :key="product.id"  v-on:swipeleft="showOptions(product,$event)"  v-on:swipeRight="hideOptions" >
   <a href="#" class="product">
      <div class="product-item" >
         <div class="product-heading">
            <div class="img">
               <img :src="'/storage/products/'+product.image">
            </div>
            <div class="product-content">
               <h6>{{product.title}}</h6>
               <p>{{product.city}}</p>
               <p>{{product.price}} RSD</p>
            </div>
         </div>
         <div class="star">
            &#9734;
         </div>
      </div>
      <options></options>
   </a>
</v-touch>

正在使用的方法

showOptions(product, i) {
    // if()
    $('.swipe-options-wrap').addClass("visible");
    this.$anime({
        targets: '.swipe-options-wrap',
        scaleX: 1,
        translateX: "0px",
        easing: 'easeInOutSine',
        width: '20%'
    })
},

在v-for中滑动时显示div

0 个答案: