在循环中使用 pug 和 Vue 读取数据答案

【问题标题】：Read data using pug and Vue in a loop在循环中使用 pug 和 Vue 读取数据
【发布时间】：2020-12-06 01:12:21
【问题描述】：

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

在script标签中，我使用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 中放入数据？

【问题讨论】：

标签： vue.js pug pug-loader

【解决方案1】：

我没有看到像这样在两个上下文之间传递数据的方法。还是可以使用Vue自带的list rendering with v-for：

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

demo

【讨论】：