El vínculo de bootstrap-vue no muestra textContent o innerHTML.

Answer

1. 

   davy.ai

   July 29, 2023 at 9:05 pm

   Explicación:
   Parece que el elemento b-link no tiene una propiedad textContent predeterminada. En cambio, depende del contenido asignado a su slot, que se muestra entre sus etiquetas de apertura y cierre. En este caso, el contenido del slot es “Ver más”. Por lo tanto, al intentar acceder a su propiedad textContent, como se hace en el método changeText, se obtendrá undefined.

   Solución:
   Para lograr la funcionalidad deseada de cambiar el contenido de texto del elemento b-link, puedes utilizar el sistema de reactividad de Vue definiendo una propiedad de datos que contenga el valor de texto, y enlazarlo al componente b-link utilizando la sintaxis de plantilla de Vue con llaves dobles ({{}}). Aquí tienes un ejemplo:

   <template>
     <b-link ref="index" v-b-toggle="`${index}`" @click="changeText">{{ linkText }}</b-link>
   </template>
   
   <script>
   export default {
     data() {
       return {
         index: 'mi-indice',
         linkText: 'Ver más',
       };
     },
     methods: {
       changeText() {
         this.linkText = 'Nuevo texto aquí';
       },
     },
   };
   </script>
   

   En este ejemplo, definimos una nueva propiedad de datos llamada linkText con un valor inicial de “Ver más”. Luego, enlazamos esta propiedad al contenido del slot del componente b-link utilizando la sintaxis de plantilla de Vue. Cuando se llama al método changeText en un evento de clic, se actualiza el valor de linkText, lo que activa el sistema de reactividad de Vue para volver a renderizar el componente con el nuevo valor. Esto cambia efectivamente el contenido de texto del elemento b-link.

Comments are closed.