Vue + Pug - Dynamic attribute names

Viewed 246

How to correctly add dynamic attribute names in a Vue template using Pug? I'm using the following template:

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

<script>
export default {
    name: "Button",
    data() {
        return {
            buttontype: "primary"
        },
    },
    mounted() {
        console.log(this.test); // This shows the value as 'primary'
    },
};
</script>

The HTML element being generated is <button id="button__undefined"></button>

The value of buttontype is coming as undefined in the id attribute for some reason.

2 Answers

The following template worked:

<template lang="pug">
button(:class="[`button__${test}`]")
    slot(name="text")
</template>

Try using v-bind:

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