Nuxtjs + Vuetify 點擊鏈接后使用 v-for 顯示 img

Question

當單擊任何鏈接獲取用於顯示的呼叫圖像的數據時

<a @click="loadImg('01')">01</a>
<a @click="loadImg('02')">02</a>

<v-col v-for="(n,i) in listImg">
    <v-img :src="require(`${n}`)"></v-img>
</v-col>

javascript:

let pj = {
    "01": [
        "~/assets/images/01/01.jpg",
        "~/assets/images/01/02.jpg",
        "~/assets/images/01/03.jpg"
    ]
    "02": [
        "~/assets/images/02/01.jpg",
        "~/assets/images/02/02.jpg"
    ]
 }

我怎樣才能得到結果

示例單擊 li#02

<img src="imgPath/01.jpg">
<img src="imgPath/02.jpg">

Answer 1

使用@click.prevent而不是@click

 new Vue({ el: '#app', data(){ return { imgList: [], pj:{ "01": [ "https://i.stack.imgur.com/VSjd1.png", "https://i.stack.imgur.com/VSjd1.png" ], "02": [ "https://i.stack.imgur.com/rXjqJ.png", "https://i.stack.imgur.com/rXjqJ.png" ] } } }, methods:{ loadImg(index){ this.imgList = this.pj[index]; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <main id="app"> <a @click.prevent="loadImg('01')">load 1</a> <a @click.prevent="loadImg('02')">load 2</a> <ul> <li v-for="(n,i) in imgList"> <img :src="imgList[i]"/> </li> </ul> </main>

但是對於可訪問性，使用<button>而不是<a>是更好的方法。