无法从对象列表 Vuejs 生成数据

Question

我是个新手。

我正在展示相关文章的编码功能。

使用Java和RESTapi的后端代码。当我使用axios调用API时。

但这种观点并不是显示数据。

我检查了API，它返回了数据。

这是我的HTML代码：

<div class='related-article-list'>
<div id="list-related-el">
<related-list></related-list>
</div>
<template id="related-list">
<div class="ralated-article-container" v-for="r in relatedLists" :key="r.id">
<div class="ralated-article-title">
<a v-bind:href="r.link">{{r.title}}</a>
</div>
<div class="user-name">
<a v-bind:href="r.userLink">{{r.user}}</a>
</div>
<div class="view-total">
<p>{{r.view}}</p>
</div>
</div>
</template>
</div>

这是我的脚本代码：

<script type="text/javascript">
$(document).ready(function () {
var id = ([[${ topicChapter.getId() }]]);
var listRelated = new Vue({
el: "#list-related-el",
components: {
'related-list': {
template: '#related-list',
data() {
return {
url: "api/get-related-article",
id: id,
relatedLists: [],
dataSize: 0
};
},

methods: {
getData: function () {
axios.get(`${this.url}id=${this.id}`).then(response => {
this.relatedLists = response.data.data;
});
}

},
watch: {
page: {
immediate: true,
handler(newVal, oldVal) {
this.getData();
}
}
}
}
}
});

})
</script>

Answer 1

您有没有尝试将这个.getData((放在挂载的钩子中？

mounted()  {
this.getData();
}

https://v2.vuejs.org/v2/api/#mounted