[英]Vue + Pug - Dynamic Class names
How to correctly add dynamic class names in a Vue template using Pug?如何使用 Pug 在 Vue 模板中正确添加动态 class 名称? 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>
正在生成的 HTML 元素是<button id="button__undefined"></button>
The value of buttontype
is coming as undefined
in the class attribute for some reason.由于某种原因,buttontype 的值在buttontype
属性中undefined
。
The following template worked:以下模板有效:
<template lang="pug">
button(:class="[`button__${test}`]")
slot(name="text")
</template>
Try using v-bind:尝试使用 v-bind:
<template lang="pug">
button(v-bind:id=`button__${buttontype}`)
slot(name="text")
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.