时间戳

首页 > 解决方案 > 无法从对象列表Vuejs生成数据

vue.js - 无法从对象列表Vuejs生成数据

问题描述

我是新手。

我正在编写显示相关文章的功能。

使用带有 REST api 的 Java 的后端代码。当我使用 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>

标签： vue.js

解决方案

您是否尝试过将 this.getData() 放在已安装的挂钩中？

mounted()  {
this.getData();
}

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

推荐阅读