Vue组件如何获取ajax数据实现列表渲染 ?

Lxxyx
  • 3.6k
<template>
    <div class="card notice" id="notice" style="position: relative;">
        <div class="card-header">
            <span class="card-title-h1">US公告</span>
            <a href="#" class="fr link card-title-link">编辑</a>
        </div>
        <div class="notice-preview" v-for="ele in noticeList">
            <div class="notice-header">
                <span class="card-title-h2">{{ele.title | notice_title}}</span>
                <span class="fr card-title-time">{{ele.date_modefy | notice_time}}</span>
            </div>
            <article style="display: none;">
                <p>
                    {{ele.content | notice_content}}
                </p>
                <a href="#" class="link fl notice-all" data-id={{ele.id}}>全部内容...</a>
                <div style="clear: both;"></div>
            </article>
        </div>
        <div>
            <p style="text-align: center;"><a href="#" class="link notice-more">查看更多……</a></p>
        </div>
    </div>
    <div class="card">
        <p style="text-align: center;">
            <img src="/static/index/img/releaseNotice.png" style="vertical-align: middle;" />
            <a href="#" class="link releaseNotice">发布公告</a>
        </p>
    </div>
    <div style="clear: both;"></div>
</template>

<script>
    require('../../../../res.js');
    export default {
        data() {
            return (
                res.notice.get_list(null,function(error,notices) {
                    return {noticeList:notices}
                })
            )
        }
    }
</script>

res是个项目用的ajax库。
想通过ajax取得的数据,赋值给这个组件,但是一直不成功。获取到的数据也无法保存到全局变量。
想了好几天了……
求助~

评论
阅读 6.2k
2 个回答

你应该把你获取数据的代码放到 created 或者 ready这些Vue的生命周期里。
例如

require('../../../../res.js');
    export default {
        data() {
            return (
                noticeList: []
            )
        },
        created: function(){
            var self = this;
            res.notice.get_list(null, function(error, notices){
                self.noticeList = notices;
            }
        }
    }

js获取数据部分写错了吧,没看到获取结果部分

宣传栏