Vue How to pass dynamic to value in router-link from prop

Question

I made a component, that handles custom buttons. I wanted to change <a> tags to <router-link> and know I'm getting an error, because the router-link is rendering before the prop gets its value. I fixed it with an if statement, I'm looking for a prettier 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>

Could anybody please help?

Answer 1

Didi you tried adding a default value to the href prop?

  props: {
    href: {
      type: String,
      default: '#',
    },
  },