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 组件 和他们的 Vue 对应项。

要更改 的内容<b-link />，您必须使用 Vue 的反应性：

let buttonText = 'View More';

{{ buttonText }}

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

Answer 2

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

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

但是由于 bootstrap-vue 将返回 vue 组件来访问其元素，因此我们需要使用 $el 来访问其属性。

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