0

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.

user180708
  • 407
  • 1
  • 4
  • 16
  • Does this answer your question? [How do I change the text of a span element using JavaScript?](https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-using-javascript) – skara9 Jan 26 '22 at 23:13

2 Answers2

2

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>
rayenpe12
  • 48
  • 1
  • 6
0

You can do document.getElementById("ID-HERE").innerHTML = "new stuff", but be warned that setting innerHTML is dangerous.

RyloRiz
  • 77
  • 2