Bootstrap-Vue的b-link组件无法获取textContent/innerHTML及修改文本内容的问题

Hey there! Let's break down why you're seeing undefined when trying to access textContent from your <b-link> component, and how to fix it.

The Root Cause #

When you use $refs on a Vue component like <b-link>, what you get back isn't the raw DOM element—it's the Vue component instance itself. Native elements like <a> or <div> give you direct access to their DOM nodes, which is why textContent works there. But for components, you need to dig a little deeper to get to the underlying DOM.

Fix 1: Access the DOM via the Component's $el Property #

Every Vue component instance has a $el property that points to the root DOM element it's mounted to. You can use this to get or modify the text content:

changeText(index) {
  const linkComponent = this.$refs[index][0];
  // Get the text content
  console.log(linkComponent.$el.textContent); // This will log "View More" now
  // Modify the text content if needed
  linkComponent.$el.textContent = linkComponent.$el.textContent === "View More" ? "View Less" : "View More";
}

Fix 2: Use Vue's Reactive Data (The "Vue Way") #

Instead of directly manipulating the DOM, which can bypass Vue's reactive system, it's better to bind the text to a data property. This keeps your data and view in sync automatically:

First, set up your data to track the link texts:

<template>
  <b-link 
    :ref="index" 
    v-b-toggle="`${index}`" 
    @click="changeText(index)"
  >
    {{ linkTexts[index] }}
  </b-link>
</template>

<script>
export default {
  data() {
    return {
      // Initialize with your starting text, one entry per link
      linkTexts: ["View More", "View More", "View More"]
    };
  },
  methods: {
    changeText(index) {
      // Toggle the text using reactive data
      this.linkTexts[index] = this.linkTexts[index] === "View More" 
        ? "View Less" 
        : "View More";
      // No need for DOM manipulation—Vue updates the view automatically!
    }
  }
};
</script>

This approach is more maintainable and aligns with Vue's data-driven philosophy. It avoids potential issues where your DOM state doesn't match your component's data state.

Quick Note #

If you go with the $el method, just make sure the component is fully mounted before accessing it. Since you're calling changeText from the @click event, the component is definitely mounted, so you don't have to worry about timing here.

内容的提问来源于stack exchange，提问作者Vishal Sagar