No puedo obtener textContent de parpadeo y cambiarlo. Si intento lo mismo con una etiqueta o una etiqueta div, entonces funciona bien.
<b-link :ref="index" vb-toggle="`${index}`" @click="changeText(index)" >View More</b-link> changeText(index) { console.log(this.$refs[index][0].textContent); // undefined }La diferencia entre <div /> y <b-link /> es que el primero es una etiqueta HTML nativa real, mientras que el segundo es un componente que proporciona cierto grado de abstracción. Para obtener más información al respecto, recomiendo leer sobre los componentes web nativos y sus contrapartes de Vue .
Para cambiar el contenido de su <b-link /> , debe utilizar la reactividad de Vue :
let buttonText = 'View More'; <b-link :ref="index" vb-toggle="`${index}`" @click="changeText(index)" >{{ buttonText }}</b-link> changeText(index) { console.log(viewMore); // undefined viewMore = 'View Less'; }Descubrí en los casos de prueba de vue js cómo hacer esto. Normalmente, esto funciona.
console.log(this.$refs[index][0].textContent);pero como bootstrap-vue devolverá el componente vue para acceder a su elemento, necesitamos usar $el para acceder a sus propiedades.
console.log(this.$refs[index][0].$el.textContent);