Experimenting with some common VueJS syntax, but I am struggling to get this Button.vue SFC to function properly:
<script setup>
defineProps({
...
href: String,
...
});
</script>
...
<template>
<Link :href="href"
:as="href == null ? 'button' : null"
:type="href == null ? 'button' : null">
<slot />
</Link>
</template>
I want to make sure that if a href is present, the Link acts like an anchor, using the provided URL.
However, if no href prop is given, it should behave as a regular button by adding as="button" and type="button" attributes to the Link component.
When I try to instantiate a Button with href="register", I get this error in the browser console:
[Vue warn]: Unhandled error during execution of render function
at <Link href="http://myproject.test/register" as=null type=null ...>
The value of href seems fine in this case since the href prop is provided, but the as=null type=null part seems to be causing an issue. It appears that "null" is not being recognized as null.
Just for reference, I am using Vue3 :)
Any suggestions or thoughts on how to resolve this? Thank you in advance