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. ViewMorechangeText(index

P粉596191963 · Answer

The difference between

and 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 , you must use Vue's reactivity:

let buttonText = 'View More';

{{ buttonText }}

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

P粉579008412 · Answer

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);