How to get object by string in Vue.js

Question

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?

S.Visser · Accepted Answer · 2022-01-20 10:14:01Z

4

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)
    }
  }
}

answered Jan 20, 2022 at 10:14

S.Visser

4,7751 gold badge25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JTInfinite Over a year ago

you beat me to it! I also think op could simply name the properties of 'this' i.e. "firstImage": firstImage

Estus Flask Over a year ago

@JTInfinite This is what return { firstImage, secondImage } does. It's short syntax for firstImage: firstImage.

JTInfinite Over a year ago

yeah you're right of course

Boussadjra Brahim · Accepted Answer · 2022-01-20 10:37:51Z

0

Based on the answer of @S.Visser which is correct, but It seems that you want something dynamic (str should be dynamic) because the current logic returns always the firstImage, to solve this you've to define str as parameter for a function return from the computed property :

 computed: {
    myImage() {
     return (str)=>this[`${str}Image`] 
    }
  }

then you could use the property like this.myImage('first') or myImage('first') in template

answered Jan 20, 2022 at 10:37

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

How to get object by string in Vue.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related