Pautan b Bootstrap-vue tidak boleh memaparkan kandungan textContent atau innerHTML

Question

Saya tidak dapat textContent dari blink dan menukarnya. Jika saya mencuba perkara yang sama dengan tag atau tag div maka ia berfungsi dengan baik.

<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

Perbezaan antara

<div /> 和 <b-link /> ialah yang pertama ialah penanda HTML asli, manakala yang kedua ialah komponen yang menyediakan tahap abstraksi tertentu. Untuk mengetahui lebih lanjut, saya syorkan membaca tentang Komponen Web asli dan Vue rakan sejawatannya.

Untuk menukar 的内容<b-link /> anda perlu menggunakan reaktiviti Vue :

let buttonText = 'View More';

{{ buttonText }}

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

Answer 2

Saya mengetahui cara melakukan ini daripada kes ujian vue js Biasanya ini berfungsi

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

Tetapi memandangkan bootstrap-vue akan mengembalikan komponen vue untuk mengakses elemennya, kita perlu menggunakan $el untuk mengakses sifatnya.

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