Is there a way to reference an array index dynamically in JavaScript?

Question

I'm building a flashcard app for my English/Chinese dictionary in Vue 3 and when the user clicks a button I want the next item to show on the screen from the imported flashcards array.

Without having to iterate through the array with a for loop and pause the iteration until the user clicks a button, I want to simply grab the item in the array by it's index by setting a count -

<script>
  import flashcards from '../flashcards/flashcards.json';
  export default {
    data() {
      return {
        count: 0,
        currentTranslation: {
          chinese: flashcards[this.count].traditional,
        },
      }
      },
      methods: {
        correctClickHandler() {
          this.setNextTranslation()
        },
        incorrectClickHandler() {
          this.setNextTranslation()
        },
        setNextTranslation() {
          this.count++
        }

    }
  }
</script>

When one of the click handlers is called, the count should increment by one and then the next item in the flashcards array should show.

Referencing this.count as an array index returns an undefined error -

Uncaught TypeError: Cannot read properties of undefined (reading 'traditional')

Why isn't flashcards[this.count].traditional the same as flashcards[0].traditional when this.count has already been set to 0?

Answer 1

this is not what you think it is inside data . To be specific, it's not a reference to the current Vue instance, which is true for methods or computed functions. It's the data function's this and therefore none of the instance properties or methods are available on it.

In your case, to retain currentTranslation dependency on this.count , it should be a computed:

<script>
  import flashcards from '../flashcards/flashcards.json';
  export default {
    data() {
      return {
        count: 0
      }
    },
    computed: {
      currentTranslation() {
        return flashcards[this.count].traditional
      }
    },
    methods: {
      correctClickHandler() {
        this.setNextTranslation()
      },
      incorrectClickHandler() {
        this.setNextTranslation()
      },
      setNextTranslation() {
        this.count++
      }
    }
  }
</script>

Answer 2

in this.data , this.count is probably not yet set at the time when you try to reference it in this.currentTranslation.chinese . What I mean with this is that if you define an object, the property isn't set when you are still in the "creation" phase. Therefore, you can't reference the object itself in that step to reuse properties you defined above your current property.

obj = {
   a: 1,
   b: obj.a + 1
}

This will give you

Uncaught ReferenceError: obj is not defined

You'd have to do this:

obj = {
   a: 1,
}
obj.b = obj.a + 1

In Vue you can use a computed property .

import flashcards from '../flashcards/flashcards.json';
export default {
    data() {
        return {
            count: 0,
        }
    },
    methods: {
        correctClickHandler() {
            this.setNextTranslation()
        },
        incorrectClickHandler() {
            this.setNextTranslation()
        },
        setNextTranslation() {
            this.count++
        }

    },
    computed: {
        // a computed getter
        chineseTranslation() {
            return flashcards[this.count].traditional
        }
    }
}