[Vuejs]-How can I able to display following using vue js?

by

0👍

It looks like a scope issue. self has to be declared outside of the function. Still I believe you do not need to specify the callback. Something like this should be sufficient:

<script>
new Vue({
    el: '#app',
    data: {
        articles: [],
    },
    mounted() {
        var self = this;

        $.ajax({
            url: "https://n2s.herokuapp.com/api/post/get_all_category/",
            method: "GET",
            dataType: "JSON",
            success: function(e) {
                self.articles = e.articles;
                console.log(e.articles)
            },
        });
    },
})
</script>

html:

<div id="app">
    <div v-for="post in articles">
        <div class="top">
            <h4>Top Categories</h4>
            <ul class="mov_list">
                <li><i class="fa fa-star"></i></li>
                <li>77</li>
                <li><a href="">{{post.name}}</a></li>
            </ul>   
        </div>
    </div>
</div>

Cheers!

Leave a comment