I'm currently implementing atomic design principles in my Vue application.
Here is the code for my button atom:
<template>
<ElButton
:type="button?.type"
:plain="button?.plain"
:rounded="button?.rounded"
:icon="button?.icon"
:disabled="button?.disabled"
:loading="button?.loading"
:size="button?.size"
>
{{ button?.label }}
</ElButton>
</template>
<script lang="ts">
import { ElButton } from "element-plus"
import { PropType, defineComponent } from "vue"
interface IButton {
label: String
type: String
plain?: boolean
rounded?: boolean
icon?: String
disabled?: boolean
loading?: boolean
size?: String
rest?: any
}
export default defineComponent({
name: "Button",
props: {
button: Object as PropType<IButton>,
},
components: {
ElButton,
},
})
</script>
I have integrated this button into my HelloWorld.vue file.
<script lang="ts">
import {defineComponent } from "vue"
import Button from "./atom/input/index.vue"
export default defineComponent({
components: {
Button,
},
})
</script>
<template>
<Button type="success" size="large" label="Primary Button" />
</template>
Everything seems to work fine with my button component. However, the text inside the button is not being displayed.
Even though I passed the label prop to the component, it appears as an attribute of the button when inspecting the button element.
For example:
<button class="el-button el-button--success el-button--large" type="button" label="Primary Button"></button>Can someone help me identify what I might be missing here?