vue.js - Nuxt : How to create links in a loop using the data as the link reference

Question

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

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

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

<!-- 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>

对于每个项目，我都想要一个链接，例如:

• 对于id a，链接应该是/content/a
• 对于id b，链接应该是/content/b

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

Answer 1

你可以使用

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

它应该可以工作

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