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