web-dev-qa-db-ja.com

変数をvue-router v-linkに渡す方法

vueコンポーネントを使用してナビゲーションリストをレンダリングし、ナビゲーションリストを渡します。各アイテムにはタイトルとリンクが含まれています。

<template>
  <ul>
    <li v-for="item in list"><a v-link="{{ path: item.link }}"></a></li>
  </ul>
</template>

<script>
  export default {
    props: ['list']
  }
</script>

変数item.linkをv-linkパスに渡してみましたが、失敗しました。

この警告を受ける：

[Vue warn]: v-link="{{ path: item.link }}": attribute interpolation is not allowed in Vue.js directives and special attributes.

変数をv-linkパスに渡す場合はどうすればよいですか？

読んでくれてありがとう ：）

vue.jsvue-router
8
luotao

v-linkのステートメントは、「Mustache」構文を必要としません。

<li v-for="item in list"><a v-link="{ path: item.link }"></a></li>

あなたは見ることができます http://router.vuejs.org/en/index.html

8
jilon

私は vue-router 2.x で以下を使用しました：

<router-link :to="{path: '/applications/' + currentApplicationId}" class="nav-link">Overview</router-link>

詳細なドキュメントは here にあります。

10
czerasz

より短い方法は：

<router-link :to="`/applications/${currentApplicationId}`">Overview</router-link>
3
Kelvin Barsana