Der B-Link von Bootstrap-vue kann weder textContent noch innerHTML-Inhalt anzeigen

Question

Ich komme nicht textContent davon ab, zu blinken und es zu ändern. Wenn ich dasselbe mit Tag oder Div-Tag versuche, funktioniert es einwandfrei.

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