I am currently working on developing a system for generating buttons using vue 3 and vue-class-component. The main goal is to create a flexible button generation process, where the number of buttons generated can vary (it could be just one or multiple).
User Input
<ButtonGroup id="bg1">
<Button text="button1" url="./location1" />
<Button text="button2" url="./location2" />
...
</ButtonGroup>
In this setup, the renderless Button component provides data while the ButtonGroup component processes this data, such as setting the primary button, before rendering all the buttons. This results in an output like:
Output
<div id="bg1" class="button-group">
<a href="./location1" class="button primary">button1</a>
<a href="./location2" class="button">button2</a>
...
</div>
The code for the Button and ButtonGroup classes is defined as follows:
// File Button.vue
@Options({})
export default class Button extends Vue {
@Prop() text!: string | undefined
@Prop({default:""}) url!: string
}
// File ButtonGroup.vue
@Options({})
export default class ButtonGroup extends Vue { // This is the rendering class
@Prop() id: string | undefined
buttons: Array<Button> = [] // Contains buttons so it can be dynamically rendered
beforeCreated(){ // Or created or so.
...
}
}
While I understand that accessing children elements in Vue 3 can be challenging, I believe this approach offers simplicity. However, if there are alternative suggestions on how to achieve this functionality effectively, I would appreciate any input.