[英]Vue How to pass dynamic to value in router-link from prop
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.我想将<a>
标记更改为<router-link>
并知道我遇到了错误,因为路由器链接在道具获得其值之前呈现。 I fixed it with an if statement, I'm looking for a prettier solution.我用 if 语句修复了它,我正在寻找一个更漂亮的解决方案。
<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?有人可以帮忙吗?
Didi you tried adding a default value to the href prop? Didi 您尝试向 href 属性添加默认值?
props: {
href: {
type: String,
default: '#',
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.