如何使用 vue js 显示以下内容？

Question

我的JSON 是：

[{
  "name": "Health care",
  "cat_id": 1
}, {
  "name": "Education",
  "cat_id": 2
}, {
  "name": "Bakery",
  "cat_id": 3
}, {
  "name": "Software company",
  "cat_id": 4
}]

我的 vue js 脚本是。

<script>
  new Vue({
  el: '#categories' ,
  data: {
    articles: [],
  },
  mounted() {
    this.$nextTick(function() {
      var self = this;
      $.ajax({
            url: "https://",
            method: "GET",
            dataType: "JSON",
            success: function (e) {

                    self.articles = e.articles;
                    console.log(e.articles)

            },
        });
    })
  },

})

</script>

使用的html代码是

<div v-for="post in articles" id="categories">
                <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>

这是我试图显示不同类别的地方。但是我遇到了一些错误。谁能帮我展示一下。我js很弱

Answer 1

看起来像是范围问题。 self 必须在函数之外声明。我仍然相信您不需要指定回调。这样的事情就足够了：

<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>

干杯！