使用Vue JS对象将新内容(HTML)附加到现有内容

时间:2018-03-30 22:30:16

标签: javascript html vue.js

我尝试使用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;

感谢。

1 个答案:

答案 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添加新索引。