每當我點擊我的圖片 slider 上的下一步或上一步時，它會滾動到頁面頂部，我該如何停止呢？

Question

<script>
export default {
  name: "Slider",
  data() {
    return {
      images: [
        "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg",
        "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg",
        "../assets/sample-1.jpg"
        "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg"
      ],
      
      currentIndex: 0
    };
  },


  methods: {
 

    next: function() {
      this.currentIndex += 1;
    },
    prev: function() {
      this.currentIndex -= 1;
    }
  },

  computed: {
    currentImg: function() {
      return this.images[Math.abs(this.currentIndex) % this.images.length];
    }
  }
};
</script>

vue.js 下面

<template>
 <div>
    <transition-group name="fade" tag="div">
      <div v-for="i in [currentIndex]" :key="i">
        <img :src="currentImg" />
      </div>
    </transition-group>
    <a class="prev" @click="prev" href="#">&#10094; Previous</a>
    <a class="next" @click="next" href="#">&#10095; Next</a>
    </div>

每次我點擊 prev 或 next 時都滾動到頂部無法弄清楚為什么。 此外，我無法從資產中獲取任何我自己的圖像以顯示在 slider 中，並且不確定為什么它不能以這種方式檢索它們（如 sample-1.jpg 中所示）謝謝。

Answer 1

1. 刪除href="#"
2. 你不需要v-for或transition-group 。 使用mode="out-in"的簡單transition就足夠了。 你把key放到當前圖像上，所以 vue 總是知道圖像是否被替換，所以它可以進行轉換

不要將圖像放入assets文件夾中。 最好放到static文件夾下。

然后你可以像/sample-1.jpg這樣訪問你的圖像

 new Vue({ name: "Slider", el: "#app", data() { return { images: [ "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg", "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg", "/sample-1.jpg", "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg" ], currentIndex: 0 }; }, })

 .v-enter-active, .v-leave-active { transition: opacity 1s ease; }.v-enter, .v-leave-to { opacity: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <a class="prev" @click="currentIndex--" v-if="currentIndex > 0">&#10094; Previous</a> <a class="next" @click="currentIndex++" v-if="currentIndex < images.length - 1">&#10095; Next</a> <transition name="v" mode="out-in"> <img:key="images[currentIndex]":src="images[currentIndex]" /> </transition> </div>