Данные VueJS из вложенных запросов Axios не отображаются в представлении
Я пытаюсь перечислить набор сообщений из API на странице с использованием VueJS и Axios. Проблема, с которой я сталкиваюсь, заключается в том, что один фрагмент данных (URL-адрес сообщения) необходимо получить с помощью отдельного вызова API для этого конкретного сообщения, и они предоставляют URL-адрес для этих данных в исходном вызове API. У меня первая часть работает отлично, но я не могу получить href для рендеринга в представлении, когда значение является отображается в Vue devtools.
JS
const vm = new Vue({
el: '#app',
data: {
posts: []
},
mounted() {
this.getPosts();
},
methods: {
getPosts() {
axios.get("api_url")
.then((response) => {
this.posts = response.data.posts;
// Get URL for each post from separate API call
this.posts.map(post => {
axios.get(post.details_url+"&output=json")
.then((response) => {
post.official_url = response.data.post.pet_details_url;
}).catch( error => { console.info(error); });
});
}).catch( error => { console.info(error); });
}
}
});
HTML
<div id = "app">
<div v-for = "post in posts">
<a :href = "post.official_url"> //href won't render
<h2>{{ post.title }}</h2>
<p>{{ post.text }}</p>
</a>
</div>
</div>
Данные, отображаемые в Vue DevTools
Спасибо за предложение @TruongDang, но добавление ключа не помогло. : /
Выглядит странно, я всегда использую href, как этот :href= "`/${post.official_url}`", и он работает. Убедитесь, что ваш post.official_url не нулевой: "(
Я изменил его на это форматирование, и теперь отображается href, но я получаю <a href = "undefined"></a>. Поэтому я думаю, что моя проблема больше связана с тем, как я устанавливаю ее в JS.
Ответы 1
Это может быть реактивная проблема. Можно попробовать Vue.set
getPosts() {
let vm = this
axios.get("api_url")
.then((response) => {
this.posts = response.data.posts;
// Get URL for each post from separate API call
this.posts.map((post, index) => {
axios.get(post.details_url+"&output=json")
.then((response) => {
post.official_url = response.data.post.pet_details_url;
Vue.set(vm.posts, index, JSON.parse(JSON.stringify(post)))
}).catch( error => { console.info(error); });
});
}).catch( error => { console.info(error); });
}
Спасибо! Это устранило мою проблему. Кроме того, спасибо за ссылку на объяснение, я все еще изучаю VueJS, так что это очень ценная информация.
Добавление
<div v-for = "post in posts" :key = "something_unique">может решить вашу проблему