我尝试使用Vue JS
加载页面内容。界面很简单,只有一个select
,一个textarea
和一个button
。我试图加载来自第三方api响应的所有内容。第一个元素加载得很好,但是除非在textarea
中输入内容,否则在完全不工作之后尝试加载的项目。情况类似于此post。但在我的情况下,有多次循环迭代,我试图加载数据。
所以
HTML
<div class="col-md-12 offset-s-1">
<ul>
<li v-for="title in titles">
<div class="row">
<div class="col-md-6">@{{ title.name }}</div>
<div class="col-md-6">@{{ title.status }}</div>
<div class="col-md-12">@{{ title.date }}</div>
<div class="col-md-12">@{{ title.desc }}</div>
</div>
<ul>
<li v-for="show in title.shows">
@{{ show.title }}
<ul>
<li v-for="episode in show.episodes">
<div class="col-md-12">@{{ episode.title }}</div>
<div class="col-md-12" v-html="episode.status"><b>Episode Status</b>: @{{ episode.status }}</div>
<div class="col-md-12"><b>Episode Update Date</b>: @{{ episode.date }}</div>
<div class="col-md-12"><b>Episode Description</b>: @{{ episode.desc }}</div>
<div class="col-md-12"><b>Episode Release Year</b>: @{{ episode.year }}</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS:
response.seasons.forEach(function (season, seasonIndex) {
axios.get('api requested uri').then(function (season) {
self.titles[index].shows[seasonIndex].episodes = season.data.episodes;
season.data.episodes.forEach(function (episode, episodeIndex) {
axios.get('api requested uri').then(function (episodes) {
episodes.data.show_id = show.data.id;
self.saveEpisode(episodes.data, index, seasonIndex, episodeIndex);
}).catch(function (error) {
console.log(error);
});
});
}).catch(function (error) {
console.log(error);
});
});
saveEpisode: function (data, index, seasonIndex, episodeIndex) {
var self = this;
axios.post(baseUrl + 'save-episode', data).then(function (response) {
self.titles[index].shows[seasonIndex].episodes[episodeIndex].status = response.data.status;
self.titles[index].shows[seasonIndex].episodes[episodeIndex].date = response.data.date;
self.titles[index].shows[seasonIndex].episodes[episodeIndex].year = response.data.year;
self.titles[index].shows[seasonIndex].episodes[episodeIndex].desc = response.data.desc;
}).catch(function (error) {
console.log(error);
});
}
来自第一个请求的响应正常,但在此之后没有任何反应。如何通过Vue JS
来控制它。我应该创建HTML
代码段,并在我收到API的回复时将其附加到div
,还是有其他方法可以实现此目的?
data
声明。
data: {
title: null,
titles: [],
type: 'movie'
}
第一个请求是简单的ajax
请求,它将响应数据传递给函数,它已被设置。
self.titles[index].shows = response.seasons;
self.titles[index].date = show.data.date;
self.titles[index].desc = show.data.desc;
感谢。
答案 0 :(得分:1)
你最有可能遇到Vue's Change Detection/Reactivity caveats。我建议你快速查看文档。从长远来看,它应该对你有很大的帮助。这是most common issues when using Vue之一。
现在的一般/安全解决方案是始终使用Vue.set()
而不是在data
对象中设置/创建属性。
例如,而不是:
self.titles[index] = {some: value}; // supposing nothing existed at position `index`
执行:
Vue.set(self.titles, index, {some: value}); // now value updates
没有必要始终使用Vue.set()
(只有在创建/添加新属性时才需要),但不仔细查看每一点你的代码设置数据,不可能知道它在哪里是可有可无的。
有一些解决方法,例如:
saveEpisode: function(data, index, seasonIndex, episodeIndex) {
var self = this;
axios.post(baseUrl + 'save-episode', data).then(function(response) {
var currentTitle = self.titles[index]; // get the value from the `data`s object
self.titles[index] = null; // important: erase the property
currentTitle.shows[seasonIndex].episodes[episodeIndex].status = response.data.status;
currentTitle.shows[seasonIndex].episodes[episodeIndex].date = response.data.date;
currentTitle.shows[seasonIndex].episodes[episodeIndex].year = response.data.year;
currentTitle.shows[seasonIndex].episodes[episodeIndex].desc = response.data.desc;
Vue.set(self.titles, index, currentTitle); // set it back using Vue.set()
}).catch(function(error) {
console.log(error);
});
}
但是,在这种情况下,理想情况下,episodes
已经被反应,您可以使用Vue.set
添加新索引。