vue.jsでjsonデータの値がhrefタグ内に表示されない

前提

nuxt.jsにてページナビをjsonファイルを使用して作成しようとしている。
エラーが出る理由がわかりません。どなたか教えていただけないでしょうか?

実現したいこと

jsonデータをlinkURLとして表示させたい

発生している問題・エラーメッセージ

bundle 'client' has 1 errors client.js?1b93:197 ./components/Tablist.vue?vue&type=template&id=0ec264a8& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./components/Tablist.vue?vue&type=template&id=0ec264a8&)Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):(Emitted value instead of an instance of Error) Errors compiling template: invalid expression: Unexpected token '{' in {{man.link}} Raw expression: :to="{{man.link}}" 6 | </li> --> 7 | <li v-for="man of nav" class="nav-item"> 8 | <router-link :to={{man.link}}>{{man.category}}</router-link> | ^^^^^^^^^^^^^^^^ 9 | </li> 10 | </ul>

該当のソースコード

vue.js

<template> <nav> <ul class="nav-list"> <li v-for="man of nav" class="nav-item"> <router-link :to="{{man.link}}">{{man.category}}</router-link> </li> </ul> </nav> </template> <script> import nav from '../assets/nav.json' export default { name: 'Tablist', data:function(){ return {nav:nav} } } </script>

JSON

[ { "id": 1, "category": "person", "link": "person" }, { "id": 2, "category": "skill", "link": "skill" }, { "id": 3, "category": "hobby", "link": "hobby" }]

補足情報(FW/ツールのバージョンなど)

packege.json

{ "name": "testap", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "core-js": "^3.25.3", "nuxt": "^2.15.8", "vue": "^2.7.10", "vue-server-renderer": "^2.7.10", "vue-template-compiler": "^2.7.10" }, "devDependencies": {} }

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント