如何使用 vue js 显示以下值？

Question

{
    "status": "ok",
    "source": "n",
    "sortBy": "top",
    "articles": [
        {
            "author": "Bradford ",
            "title": "friends.",
            "url": "http: //",
            "urlToImage": "http://"
        },
        {
            "author": "Bradford  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        }
    ]
}

我的vue js脚本是

<script>
feed = new Vue({
    'el': '#feed',
    data: {
        articles: [],
    },
    mounted: function () {
        var self = this;
        $.ajax({
            url: "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4db9d5d381a14ffcbca8e8a9aa8b864c",
            method: "GET",
            dataType: "JSON",
            data: {},
            success: function (e) {
                if (e.status == ok) {
                    self.data = e.data;
                }
            }
        });
    }
});
</script>

并显示为

        <div v-for="post in articles" class="mke_">
            <div class="row">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
    {{post.title}}
        </div></div>

有人可以帮我显示文章[]中的内容吗？我在vue js方面很弱。模式是否正确。

Answer 1

试试这个

你的 vue 脚本应该是这样的

<script>
 new Vue({
  el: '#feed' ,
  data: {
    articles: [],
  },
  mounted() {
    this.$nextTick(function() {
      var self = this;
      $.ajax({
            url: "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4db9d5d381a14ffcbca8e8a9aa8b864c",
            method: "GET",
            dataType: "JSON",
            success: function (e) {
                if (e.status == 'ok') {
                    self.articles = e.articles;
                    console.log(e.articles)
                }
            }, error: function(){
            console.log('Error occurred');
            }
        });
    })
  },
})
</script>

你的html

 <div id="feed">
  <div v-for="post in articles" class="mke_">
      <div class="row">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
          {{post.title}}
        </div>
 </div>

你可以在这里查看https://jsfiddle.net/adkstar/hf9w9zL3/

编辑： 要仅显示第三和第五篇文章，您可以这样做

  <div v-for="(post,index) in articles" class="mke_">
    <div v-if="(index == 3 || index == 5)">
      <div class="row">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
            {{post.title}}
      </div>
    </div>
  </div>

Answer 2

很高兴您已将上下文保存在 self 变量中。
您只需要使用self.articles = e.articles;编辑您的代码
数据绑定到 self.articles 后，Vue 将调用 articles getter/setter 函数（声明式反应式渲染概念）并更新它。
更新答案：
编辑你的html：

<div v-for="(post,index) in articles" class="mke_">
            <div class="row" v-if="index == 3 || index == 5">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
    {{post.title}}
        </div></div>