vue.js - 在循环中使用 pug 和 Vue 读取数据

Question

在 Vue 模板中，我在 pug 语法中有这个 html

<template lang="pug">
  div
    - var cards = [{ title: 'Mountain View' },{ title: 'Mountain View' }]


    mixin card(title, copy, button)
      .card
        .content
          h2.title= title
          p.copy= copy
          button.btn= button

    main.page-content
      each card in cards
        +card(card.title)

</template>

在脚本标签中，我使用 axios 从 json 文件中获取数据。

<script>
import axios from "axios";

export default {
  data() {
    return {
      players: [],
      loading: true,
      errored: false
    };
  },
  methods: {
    fetchData() {
      axios
        .get("data.json")
        .then(response => this.players = response.data)
        .catch(error => {
          console.log(error);
          this.errored = true;
        })
        .finally(() => (this.loading = false));
    }
  },  
  mounted() {
    this.fetchData();
  }
}
</script>

我的问题是如何从players财产中获取数据cards？

Answer 1

我没有看到像这样在两个上下文之间传递数据的方法。你仍然可以使用 Vue 自己的列表渲染v-for：

<template lang="pug">
div
  main.page-content
    .card(v-for="card in players")
      .content
        h2.title {{ card.title }}
</template>

演示