Laravel nova custom card vue file - how to set href attribute to external url

Question

So I have made a custom card in Laravel nova and I want to pass in a URL as metadata and set the href attribute of a link to that URL.

It works but Vue keeps setting the URL to be an internal URL:

I want it to be :

http://foo.peoplebase.test/admin

but when I click the link I end up with is:

http://peoplebase.test/admin/dashboards/http//:foo.peoplebase.test

Here is the Vue file

<template>
<card class="flex flex-col items-center justify-center">
    <div class="px-3 py-3">
        <h1 class="text-center text-3xl text-80 font-light">{{ card.title }}</h1>
    </div>
    <div class="px-3 py-3">
        <a :href="'http//:' + card.domain + '.peoplebase.test'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Website</a>
        <a :href="'http//:' + card.domain + '.peoplebase.test/admin'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Backend</a>
        <a href="http://foo.peoplebase.test/" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Settings</a>
    </div>
</card>
</template>

<script>
   export default {
 props: [
    'card',

    // The following props are only available on resource detail cards...
    // 'resource',
    // 'resourceId',
    // 'resourceName',
],

mounted() {
    //
  },
}
</script>

The normal href on the third link works fine but the dynaimc :href does not.

What am I missing here?

Answer 1

You have a typo! that's why it's not working as expected!

<a :href="'http//:' 

change the http//: to http://

<a :href="'http://'