Nuxt：如何使用数据作为 link 引用在循环中创建 links

Question

我正在从数据源（使用 $content）读取一组 link，并希望生成一个 HTML 元素的列表，这些元素将 link 到相应的页。

// test.yaml in content directory
links:
  - id: a
    title: A
  - id: b
    title: B
  - id: p
    title: P

现在，我想遍历这些数据并生成一组 HTML links

<!-- page.vue in pages directory -->
 <template>
   <div v-for="link in this._links" :key="link.id">
      <NuxtLink to="/whatToPutHere">{{link.title}}</NuxtLink>
   </div>
 </template>

// script
 <script>
   export default {
      async asyncData({ $content, params }) {
         const _links = await $content("test").fetch();
         return _links;
      }
   };
 </script>

对于每个项目，我想要一个 link 例如：

对于id a，link应该是/content/a
对于id b，link应该是/content/b

假设上述 links 的 slug 存在并且页面按预期工作。谢谢

Answer 1

你可以使用

<NuxtLink :to="`/content/${link.id}`">{{link.title}}</NuxtLink>

它应该可以工作

在 vue 中，你不需要添加整个 v-bind:tag 并且可以只使用 :tag.
另外，如果您 v-bind 任何标签，引号之间的任何内容都将是 javascript 代码。

Nuxt：如何使用数据作为 link 引用在循环中创建 links

Nuxt: How to create links in a loop using the data as the link reference

vue.js

nuxt.js