[英]How to interpolate prop into the <router-link>?
如果我這樣做{{ name }}
,我會得到“活動”
我想把它渲染到我的鏈接中
<router-link :to="'/' + '123' + '/' + item.id"> {{ item.name }}</router-link>
我試過用{{ name }}
替換 '123'
<router-link :to="'/' + {{ name }} + '/' + item.id"> {{ item.name }}</router-link>
我不斷得到
編譯失敗。 ./src/components/Table.vue?vue&type=template&id=783f90ce& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier": “5c3eaf11-vue-loader-template”}../node_modules/vue-loader/lib/loaders/templateLoader?js?.vue-loader-options.?/node_modules/cache-loader/dist/cjs?js.?ref --1-0?./node_modules/vue-loader/lib.?vue-loader-options../src/components/Table:vue:vue&type=template&id=783f90ce&) 模塊構建失敗(來自:/node_modules/vue- loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1767)
./src/components/Table.vue?vue&type=template&id=783f90ce& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier": “5c3eaf11-vue-loader-template”}../node_modules/vue-loader/lib/loaders/templateLoader?js?.vue-loader-options.?/node_modules/cache-loader/dist/cjs?js.?ref --1-0?./node_modules/vue-loader/lib.?vue-loader-options../src/components/Table:vue:vue&type=template&id=783f90ce&) 模塊構建失敗(來自:/node_modules/vue- loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1767)
只需在沒有{{}}
情況下使用它:
<router-link :to="'/' + item.name + '/' + item.id"> {{ item.name }}</router-link>
或使用字符串模板:
<router-link :to="`/${item.name}/${item.id}`"> {{ item.name }}</router-link>
小胡子語法在 html 屬性中無效。 也就是說,這是無效的:
<router-link
:to="'/' + '123' + '/' + item.id"
>
{{ item.name }}
</router-link>
什么是正確的語法是:
<router-link
:to="`/${item.name}/${item.id}`"
>
{{ item.name }}
</router-link>
此外,我建議在文檔中檢查傳遞屬性到路由 object 。 這將向您展示您可以在router
中聲明變量,例如:id
。
除了上述之外,我還要提出另一個建議,指出如果這被定義為組件的計算屬性,那么它很容易在 devtools 和將來的調試中查看(例如,如果 object 道具未定義,您可能希望返回空字符串)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.