我無法從眨眼中取得 textContent 並更改它。如果我對標籤或 div 標籤進行相同的嘗試,那麼它就可以正常工作。
textContent
<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 }
<div /> 和<b-link /> 之間的差異在於,前者是實際的原生HTML 標記,而後者是提供一定程度抽象的組件。要了解更多信息,我建議閱讀本機 Web 元件 和他們的 Vue 對應項。
<div />
<b-link />
要更改 的內容<b-link />,您必須使用 Vue 的反應性:
的內容<b-link />
let buttonText = 'View More'; {{ buttonText }} changeText(index) { console.log(viewMore); // undefined viewMore = 'View Less'; }
我從vue js測試案例中找到如何做到這一點 通常這有效
console.log(this.$refs[index][0].textContent);
但是由於 bootstrap-vue 將傳回 vue 元件來存取其元素,因此我們需要使用 $el 來存取其屬性。
console.log(this.$refs[index][0].$el.textContent);
<div />
和<b-link />
之間的差異在於,前者是實際的原生HTML 標記,而後者是提供一定程度抽象的組件。要了解更多信息,我建議閱讀本機 Web 元件 和他們的 Vue 對應項。要更改
的內容<b-link />
,您必須使用 Vue 的反應性:我從vue js測試案例中找到如何做到這一點 通常這有效
但是由於 bootstrap-vue 將傳回 vue 元件來存取其元素,因此我們需要使用 $el 來存取其屬性。