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

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

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>

Advertisement

Answer