bootstrap-vue的b-link無法顯示textContent或innerHTML內容
P粉293341969
P粉293341969 2024-03-27 08:23:32
0
2
436

我無法從眨眼中取得 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
}

P粉293341969
P粉293341969

全部回覆(2)
P粉596191963

<div /><b-link /> 之間的差異在於,前者是實際的原生HTML 標記,而後者是提供一定程度抽象的組件。要了解更多信息,我建議閱讀本機 Web 元件 和他們的 Vue 對應項

要更改 的內容<b-link />,您必須使用 Vue 的反應性

let buttonText = 'View More';

{{ buttonText }}

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

我從vue js測試案例中找到如何做到這一點 通常這有效

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

但是由於 bootstrap-vue 將傳回 vue 元件來存取其元素,因此我們需要使用 $el 來存取其屬性。

console.log(this.$refs[index][0].$el.textContent);
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板