Read data using pug and Vue in a loop

Question

In Vue template, I have this html in pug syntax

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

In the script tag, I use axios to get from data from json file.

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

My question is how do I put the data from players property cards?

Answer 1

I don't see a way to pass data between the two contexts like that. You can still use Vue's own 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