How to display dynamic variable in HTML

I’m wondering how to display a number in HTML that was created dynamically later on in the code. For instance I initialize the value reportDataLength in data(), and I tested that it was returning the right value by doing a console.log(), but now I want to display this value in HTML?

  name: 'notification-tray',
  data() {
    return {
      headers: [
        {
          text: 'Notifications',
          value: 'Body',
          width: '380px',
        },
      ],
      reportData: [],
      reportDataLength: 0,
    };
  },
  async created() {
    await this.getReportDataLength();
  },
  methods: {
    async getReportDataLength() {
      ... this.reportDataLength = this.reportData.length;
      
      console.log(this.reportDataLength);
    },
  },
};

But obviously when I do something like this,

      <span class="d-none">Notification Button</span>
      <span class="badge">this.reportDataLength</span>

it doesn’t work correctly. The other solutions I saw for similar problems used JQuery, and I feel like there’s a simple way to reference this, but I can’t seem to find it out.

>Solution :

okay so if you are using pure Javascript , u can use this in your javascript function :

Document.getElementsByClassName('badge').innerHtml=this.reportDataLength ; 

otherwise if you are using vue js you can try something like this in your html file :

      <span class="badge">{{reportDataLength}}</span>