试图获取一个对象键，它是一个“字母+计数器编号”变量，但它不起作用答案

【问题标题】：trying to get an objects key which is a 'letters + counter number' variable but it won't work试图获取一个对象键，它是一个“字母+计数器编号”变量，但它不起作用
【发布时间】：2022-01-16 12:41:37
【问题描述】：

我知道这可能是一个愚蠢的问题，但我不确定如何构建这行代码来完成我需要的工作。我正在使用 Vue CLI，并且我的数据中的数组中有一些对象。其中一个对象有几个图像链接，其键为 -> 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)
            }
         }
}

【问题讨论】：

标签： vue.js javascript-objects jsobject

【解决方案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])

【讨论】：

谢谢你 ofc 完全忘记了括号符号退出