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值？

回答

相關問題