How to get object by string in Vue.js

January 20, 2022

I have imported some images in vue file.
I also have a string related to these images, and would like to get them dynamically using the string value.

For example:

import firstImage from '../images/first_image.png'
import secondImage from '../images/second_image.png'

export default {
  data() {
    return {
      firstImage,
      secondImage
    }
  },
  computed: {
    myImage() {
      let str = 'first'; // this string value varies.
      return `${str}Image` // I want something like this to return firstImage (image, not string)
    }
  }
}

Is there any way to turn string into object?

>Solution :

Since firstImage is in the data object you can just selecting it by this with name in [ ]

import firstImage from '../images/first_image.png'
import secondImage from '../images/second_image.png'

export default {
  data() {
    return {
      firstImage,
      secondImage
    }
  },
  computed: {
    myImage() {
      let str = 'first'; // this string value varies.
      return this[`${str}Image`] // I want something like this to return firstImage (image, not string)
    }
  }
}