在循环中使用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>

在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的数据？

Answer 1

我看不出有什么方法可以像那样在两个上下文之间传递数据。您仍然可以使用Vue自己的列表渲染v-for:

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

演示