b-link of bootstrap-vue doesn't show textContent or innerHTML

Question

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
}

Answer 1

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