I created a custom button component and decided to switch from using <a> tags to <router-link>. However, I encountered an error because the router-link was rendering before the prop received its value. To address this, I added an if statement but I'm seeking a more elegant solution.
<template>
<input
v-if="type === 'submit'"
type="submit"
class="button"
:value="$slots.default[0].text"
:class="{'button--inactive': disabled}"
/>
<router-link
v-else-if="type === 'button' && href !== undefined"
class="button"
:class="{'button--inactive': disabled}"
:to="href"
>
<slot></slot>
</router-link>
</template>
<script>
export default {
name: 'Button',
props: {
href: {
type: String
},
type: {
type: String,
default: 'button',
validator: value => ['button', 'submit'].indexOf(value) !== -1
},
disabled: {
type: Boolean
}
}
}
</script>
Is there anyone who can offer assistance?