problem description

the basic function is to click on the picture to jump to another page, but the bound event is useless and does not execute the binding event

the environmental background of the problems and what methods you have tried

I tried to bind with @ click.native, but it didn"t work;
also tried to bread a layer of div outside the img and then bind the event to the div. Here is the code bound to the div

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< template >
< div class= "siwperContainer" >

<swiper indicator-dots="true" autoplay="true" circular="true">
  <div v-for="(book,idx) in top9Books" :key="idx">
    <swiper-item class="si">
      <div @click.native="bookDetail">
        <img :src="book.image" mode="aspectFit" class="swiperImg">
      </div>
    </swiper-item>
  </div>
</swiper>

< / div >
< / template >

< script >
export default {
props: ["top9Books"],
computed: {

imgUrls () {
  let res = this.top9Books
  return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
}

},
methods: {

bookDetail () {
  console.log("click img")
  wx.navigateTo({
    url: "/pages/detail/main?id=" + 15
  })
}

}
}
< / script >

< style >
.swiperContainer {
margin-top: 5px;
}
.si {
display: flex;
flex-direction: row;
}
.si div {
width: 33%;
height: 100%;
}
.swiperImg {
width: 100%;
height: 100%;
}
< / style >

what result do you expect? What is the error message actually seen?