Bootstrap-vue's b-link cannot display textContent or innerHTML content

Question

I can't get the textContent from blink and change it. If I try the same with tag or div tag then it works fine.

<b-link
 :ref="index"
 v-b-toggle="`${index}`"
 @click="changeText(index)"
>View More</b-link>

changeText(index) {
 console.log(this.$refs[index][0].textContent); // undefined
}

Answer 1

The difference between

<div /> and <b-link /> is that the former is the actual native HTML markup, while the latter provides a certain degree of Abstract components. To learn more, I recommend reading Native Web Components and their Vue counterparts.

To change the contents of <b-link />, you must use Vue's reactivity:

let buttonText = 'View More';

{{ buttonText }}

changeText(index) {
 console.log(viewMore); // undefined
 viewMore = 'View Less';
}

Answer 2

I found how to do this from vue js test case Usually this works

console.log(this.$refs[index][0].textContent);

But since bootstrap-vue will return the vue component to access its elements, we need to use $el to access its properties.

console.log(this.$refs[index][0].$el.textContent);