Javascript 如何设置vue可以读取并对swiper'；s事件处理程序

我使用的是vue awesome swiper，我希望能够在特定条件下显示或隐藏下一个/上一个按钮

具体来说，当幻灯片到达开头时，它应该显示“下一步”按钮，然后当幻灯片到达结尾时，它应该隐藏该按钮，而显示“上一步”按钮

如果可能的话，我希望它被设置为一个v-If可以钩住的变量。我该怎么做呢

HTML

   <div id="swiper">
<div class="menu-tabs-icon-label">
    <swiper ref="productMenu" :options="swiperNavMenu">
        <swiper-slide>
            <div class="nav-item">
                <a href="#"> Item 1 </a>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="nav-item">
                <a href="#"> Item 2 </a>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="nav-item ">
                <a href="#"> Item 3 </a>
            </div>
        </swiper-slide>
    <div v-if="reachedEnd" class="swiper-button-prev" slot="button-prev"></div>
    <div v-if="reachedBeginning" class="swiper-button-next" slot="button-next"></div> 
    </swiper>
    </div>
</div>

---

您的问题与未定义

reachedStart

和

reachedEnd

变量有关

...
data() {
  return {
    reachedBeginning: false,
    reachedEnd: false,
    swiperNavMenu: {
      freeMode: true,
      slidesPerView: 5.75,
      on: {
        reachBeginning: ()=> {
          this.reachedBeginning = true; 
        },
        reachEnd: ()=> {
          this.reachedEnd = true;
        }
      }
    }
  }  
},
...

---

我发现答案在于将实例绑定到变量。最终代码应如下所示：

data() {
const self = this; // this is the line that fixes it all
return { 
  reachedEnd: false,
  swiperNavMenu: {
    on: {
      reachEnd: function(){
        self.reachedEnd=true
      }
    }
  }
 };
},

---

还是要感谢sugars的指点。

你的swiper版本是什么？swiper版本是4.4.2即使加上这一点，它似乎对swiper的事件没有反应。它仍然是假的（初始值），即使它被认为触发了这两个条件。此外，获取此错误：that.reachedbeagining您是否可以确认已触发上的

事件？如果我删除that.reachedbeagining=true，它确实会被触发；因为错误[Vue warn]：挂载钩子中的错误：“ReferenceError:that not defined”使用es6的箭头函数将其指向Vue instanceSorry，仍然没有反应（但错误现在已消失，因为您将其更改为“this”而不是“that”）。我可以确认事件触发器和传递到this.reachedbeaging=true和this.reachedbend=true行的代码。不幸的是，它仍然没有被vue截获。这看起来和我在开始时所想的一样。但是您给出的那个并没有将变量公开到根范围。其他数据之前的“const self=this”是解决此问题的关键。但还是要感谢你的指导。谢谢。不客气，你可以检查我的，一开始是正确的。
data() {
const self = this; // this is the line that fixes it all
return { 
  reachedEnd: false,
  swiperNavMenu: {
    on: {
      reachEnd: function(){
        self.reachedEnd=true
      }
    }
  }
 };
},