Me pregunto cómo mostrar un número en HTML que se creó dinámicamente más adelante en el código. Por ejemplo, inicialicé el valor reportDataLength en data() , y probé que devolvía el valor correcto haciendo un console.log() , pero ahora quiero mostrar este valor en 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); }, }, };Pero obviamente cuando hago algo como esto,
<span class="d-none">Notification Button</span> <span class="badge">this.reportDataLength</span>no funciona correctamente. Las otras soluciones que vi para problemas similares usaban JQuery, y siento que hay una manera simple de hacer referencia a esto, pero parece que no puedo encontrarlo.
bien, si está usando Javascript puro, puede usar esto en su función de javascript:
Document.getElementsByClassName('badge').innerHtml=this.reportDataLength ;de lo contrario, si está utilizando vue js, puede probar algo como esto en su archivo html:
<span class="badge">{{reportDataLength}}</span>Puede hacer document.getElementById("ID-HERE").innerHTML = "new stuff" , pero tenga en cuenta que configurar innerHTML es peligroso.