This is my JS code:

GET_VALUE: function(data) {
      if (data) {
        const keysOnly = Object.keys(data).map(key => String(key));
        console.log(keysOnly.length);
        const test = document.getElementById(keysOnly);
        console.log(test);
    
        // Use this.$nextTick to wait for the DOM update
          keysOnly.forEach(key => {
            const test = document.getElementById(key);
            console.log(test)
          });
      } else {
        console.error('Received undefined data.');
      }
    }
  }

This is my HTML code:

<div class="mainScreenBodyText" :id="reward.day">
  <img class="question" src="./assets/question.png" >
  <span class="mainScreenBodyDesignMainTitle"><span class="effect">{{reward.cardNo}}</span> {{reward.displayName}}</span>
  <img class="test" :src="reward.url">
  <div class="mainScreenBodyBottom">
    <img src="./assets/smile.png">
    <span class="mainScreenBodyDesignSubTitle">Smile</span>
  </div>
</div>

Why can’t getElementById() find the ID of the mainScreenBodyText div? I’m trying everything to solve this problem, like googling, changing it to refs, etc.