Vue.js中有条件的<router-link>依赖于prop值？

希望这是一个相当简单的问题/答案，但我无法在文档中找到很多信息。Vue.js中有条件的<router-link>依赖于prop值？

有没有一种方法来启用或禁用<router-link>生成的锚点，取决于是否传递一个道具？

<router-link class="Card__link" :to="{ name: 'Property', params: { id: id }}"> 
    <h1 class="Card__title">{{ title }}</h1> 
    <p class="Card__description">{{ description }}</p> 
</router-link>

如果没有id传递给这个组件，我想停用产生的任何链接。

有没有办法做到这一点，而不是把内容加倍到v-if？

谢谢！

来源

2017-06-29 Michael Giovanni Pumo

如果我理解你的问题，我认为如果你想根据'id' prop的存在有条件地渲染'router-link'组件，就必须使用'v-if'。或者你的意思是你想让'a'标签渲染为别的东西（比如'div'）？ – thanksd

正如@thanksd所提到的，你可以根据id值指定一个router-link标签：'：tag =“（id || id == 0）？'a'：'div'”' – wostex

假设您想禁用锚点标记，因为在不可点击的情况下并禁用该选项使用CSS。 isActive应该通过检查prop id来返回true。

<router-link class="Card__link" v-bind:class="{ disabled: isActive }" :to="{ name: 'Property', params: { id: id }}"> 
    <h1 class="Card__title">{{ title }}</h1> 
    <p class="Card__description">{{ description }}</p> 
</router-link> 

<style> 
.disabled { 
    pointer-events:none; 
    opacity:0.6;   
} 
<style>

如果您只想禁用导航，您可以使用路线警卫。

beforeEnter: (to, from, next) => { 
      next(false); 
}

来源

2017-06-29 18:32:17 Charith

Vue.js中有条件的<router-link>依赖于prop值？

回答

相关问题