Le lien B de Bootstrap-vue ne peut pas afficher le contenu textContent ou innerHTML

Question

Je n'arrive pas à obtenir textContent en clignant des yeux et à le changer. Si j'essaie la même chose avec une balise ou une balise div, cela fonctionne bien.

<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

La différence entre

<div /> 和 <b-link /> est que le premier est un véritable balisage HTML natif, tandis que le second est un composant qui offre un certain niveau d'abstraction. Pour en savoir plus, je vous recommande de lire sur les Web Components natifs et leurs équivalents Vue.

Pour changer 的内容<b-link /> il faut utiliser la réactivité de Vue  :

let buttonText = 'View More';

{{ buttonText }}

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

Answer 2

J'ai découvert comment faire cela à partir des cas de test de vue js Habituellement, cela fonctionne

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

Mais puisque bootstrap-vue renverra le composant vue pour accéder à ses éléments, nous devons utiliser $el pour accéder à ses propriétés.

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