bootstrap-vue 的 b-link 不显示 textContent 或 innerHTML

Question

我无法从闪烁中获取 textContent 并更改它。如果我用标签或 div 标签尝试相同的方法，那么它工作正常。

<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

<div /> 和 <b-link /> 之间的区别在于，前者是实际的原生 HTML 标记，而后者是提供某种程度抽象的组件。要了解更多相关信息，我建议阅读原生 web components and their Vue counterparts.

要更改 <b-link /> 的内容，您必须使用 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';
}

Answer 2

我从 vue js 测试用例中找到了如何做到这一点 通常这有效

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

但是由于 bootstrap-vue 将 return vue 组件访问它的元素，我们需要使用 $el 来访问它的属性。

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