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

Question

我无法从blink中获取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

我从vue-js测试用例中发现了如何做到这一点正常情况下，这是

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

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

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

Answer 2

<div />和<b-link />之间的区别在于，前者是一个实际的本地HTML标记，而后者是一个提供一定程度抽象的组件。要了解更多信息，我建议阅读有关本地web组件及其Vue对应组件的信息。

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

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';
}