Vue + Pug - 动态属性名称

Question

如何使用 Pug 在 Vue 模板中正确添加动态属性名称？我正在使用以下模板：

<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>

正在生成的 HTML 元素是 <button id="button__undefined"></button>

出于某种原因，buttontype 的值在 id 属性中显示为 undefined。

Answer 1

以下模板有效：

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

Answer 2

尝试使用 v-bind：

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

Vue + Pug - 动态属性名称

Vue + Pug - Dynamic attribute names

vue.js

pug