es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue + Pug – Nombres de atributos dinámicos

31 Jul, 2023 Programación

Cómo agregar correctamente nombres de atributos dinámicos en una plantilla Vue utilizando Pug? Estoy usando la siguiente plantilla:

<template lang="pug">
    button(id=button__${buttontype})
        slot(name="text")
</template>

export default {
    name: "Button",
    data() {
        return {
            buttontype: "primary"
        };
    },
    mounted() {
        console.log(this.buttontype); // Esto muestra el valor como 'primary'
    },
};

El elemento HTML que se está generando es <button id="button__undefined"></button>

El valor de buttontype está llegando como undefined en el atributo id por alguna razón.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar correctamente nombres de atributos dinámicos en una plantilla de Vue utilizando Pug, puedes utilizar la sintaxis de interpolación de cadenas colocando el nombre del atributo dentro de llaves {} y embebiento una expresión de JavaScript que evalúe al valor del atributo dentro de las llaves. Aquí tienes un ejemplo actualizado de la plantilla:

    <template lang="pug">
  button(:id=`button__${buttontype}`)
    slot(name="text")
</template>

<script>
export default {
  name: "Button",
  data() {
    return {
      buttontype: "primary",
    };
  },
  mounted() {
    console.log(this.buttontype); // Esto muestra el valor como 'primary'
  },
};
</script>

    La diferencia clave es el uso de : antes del nombre del atributo para indicar que es un atributo dinámico. El atributo id ahora utiliza interpolación de cadenas para embeber el valor de buttontype dentro de comillas invertidas `. Esto debería renderizar correctamente el elemento HTML con el nombre de atributo dinámico, como <button id="button__primary"></button>.

    Ten en cuenta que el registro en la consola en el gancho mounted debe referirse a this.buttontype en lugar de this.test, ya que la variable se llama buttontype en el método data.

Comments are closed.