I am unable to get textContent from blink and change it. If I try the same with a 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
}
The difference between a <div /> and <b-link /> is, that the former is an actual native HTML tag while the latter is a component which provides some degree of abstraction. To learn more about that, I recommend reading about native web components and their Vue counterparts.
To change the content of your <b-link /> you have to make use of Vue's reactivity:
let buttonText = 'View More';
<b-link
:ref="index"
v-b-toggle="`${index}`"
@click="changeText(index)"
>{{ buttonText }}</b-link>
changeText(index) {
console.log(viewMore); // undefined
viewMore = 'View Less';
}
I found out from the vue js test cases how to do this Normally this works
console.log(this.$refs[index][0].textContent);
but as bootstrap-vue will return vue component to access its element we need to use $el to access its properties.
console.log(this.$refs[index][0].$el.textContent);