试图获取一个对象键，它是一个 'letters + counter number' 变量，但它不起作用

Question

我知道这可能是个愚蠢的问题，但我不确定如何构建这行代码来完成我需要的事情。我正在使用 Vue CLI，我的数据中有一个数组中的一些对象。其中一个对象有多个图像 links，其键为 -> img1 : ./link, img2: ./link2。在我的函数中，我需要将目标元素源更改为下一个图像，即从 img1 到 img2，其中我有一个计数器，用于存储我希望 img 更改为的数字。但是结果只显示 NaN。

这是我的 HTML:

<img @click="storyboard" v-else :src="slide.img1" />
    <div class="counter hide">
       <p>{{ counter }} / 5</p>
    </div>

这是一些 JS

data() {
         return {
            slides: [
               { title: 'Landing Page', img1: require("../assets/wadah/proposal.mp4"), info: "Wadah Archive is an alternative museum where everyday artefacts are given meaning through crowdsourced nostalgia. The online archive stresses on the idea that the stories and conversations about the artefact by people visiting the archive should be a part of the artefact itself. It is a reflection on traditional methods of preserving and displaying objects through proposing an alternative navigation system by translating physical artefacts into a digital space.", makeSmall: false
               }, {
                  title: "Interacting with 3D objects", img1: require("../assets/wadah/pinStill.jpg"), info: "dummydata", makeSmall: false
               }, {
                  title: "Designing Pins and Signage", img1: require("../assets/wadah/pins.png"), info: "dummydata", makeSmall: true
               },{
                  title: "Home and Index Navigation", img1: require("../assets/wadah/home1.jpg"), img2: require("../assets/wadah/home3.jpg"), img3: require("../assets/wadah/home2.jpg"), img4: require("../assets/wadah/index.jpg"), img5: require("../assets/wadah/index2.jpg"), info: "dummydata", makeSmall: false
               },{
                  title: "User Flow", img1: require("../assets/wadah/wireflow.png"), info: "dummydata", makeSmall: false
               },
            ],
            visibleSlide: 0,
            counter: 1
         }
      }

  methods: {

storyboard(event) {
            if (this.visibleSlide === 3) {
               let ele = event.target
               this.counter++
               ele.src = this.slides[3].img + this.counter
               // console.log(this.slides[3].img + 2)
               // console.log(ele.src, this.counter)
            }
         }
}

Answer 1

const obj = {
  title: "Home and Index Navigation", 
  img1: "../assets/wadah/home1.jpg", 
  img2: "../assets/wadah/home3.jpg", 
  img3: "../assets/wadah/home2.jpg", 
  img4: "../assets/wadah/index.jpg", 
}

let counter = 2

console.log("Incorrect:", obj.img + counter) // obj.img does not exists = undefined

console.log("Correct:", obj["img"+counter])

试图获取一个对象键，它是一个 'letters + counter number' 变量，但它不起作用

trying to get an objects key which is a 'letters + counter number' variable but it won't work

javascript-objects

jsobject

vue.js