如何在 vuejs 中的以下示例中显示 post { } 中的值？

Question

     {"status":true,"data":[{"agent_id":7042,"p_id":7039,"post":{"author":83,"created_on":"2017-10-07 14:28:36","sub_category":"Litigation Support","category":"Personal Investigation","budget":"5555","views":"0","status":"986","id":7039,"country":"India","state":"Kerala","quote":{"ref_id":"61","agent_id":7042,"p_id":7039,"created_on":"2017-10-09 10:41:15"}}},{"agent_id":7042,"p_id":7040,"post":{"author":83,"created_on":"2017-10-09 12:06:01","sub_category":"Pre-Matrimonial Investigation","category":"Personal Investigation","budget":"5555","views":"0","status":"984","id":7040,"country":"India","state":"Kerala","quote":{"ref_id":"61","agent_id":7042,"p_id":7039,"created_on":"2017-10-09 10:41:15"}}}]}


      <div id="quotes">
      <div v-for="post in data" class="mke_">
 <card-component v-bind:id="post.p_id" v-bind:ins="post.category" v-bind:country="post.country" v-bind:state="post.state" v-bind:attachment_id="post.attachment_preview">
                 </card-component>
                  </div>

这是我获取值的vue js代码，得到的值是上面的格式

              quotes = new Vue({
'el' : '#quotes',
data : {
  posts : [],
  has_no_posts : true
},
mounted : function(){
  var self = this;
  $.ajax({
    url : "url",
    method : "POST",
    dataType : "JSON",
    data : {},
    success : function(e){
      if(e.status == true){
        self.data = e.data;
        if(e.data.length > 0)
        self.has_no_posts = false;
      }
    }
  });
}
});

这是我的代码，用于显示相同的错误。所以有人请帮我做同样的事情

Answer 1

您必须更加小心自己的数据。 第一个问题：您将 ajax 查询的结果分配给 self.data 而不是 self.posts。 第二个问题：每个“帖子”实际上都包含另一个具有实际帖子属性的“帖子”对象。所以你需要使用post.post.category 来获取它。 请参阅下面的 sn-p。注意：我用 setTimeout(0) 替换了您的 aja 调用。 最后，您应该将has_no_posts 转换为依赖于self.posts 的计算属性。

var e = {
  "status": true,
  "data": [{
    "agent_id": 7042,
    "p_id": 7039,
    "post": {
      "author": 83,
      "created_on": "2017-10-07 14:28:36",
      "sub_category": "Litigation Support",
      "category": "Personal Investigation",
      "budget": "5555",
      "views": "0",
      "status": "986",
      "id": 7039,
      "country": "India",
      "state": "Kerala",
      "quote": {
        "ref_id": "61",
        "agent_id": 7042,
        "p_id": 7039,
        "created_on": "2017-10-09 10:41:15"
      }
    }
  }, {
    "agent_id": 7042,
    "p_id": 7040,
    "post": {
      "author": 83,
      "created_on": "2017-10-09 12:06:01",
      "sub_category": "Pre-Matrimonial Investigation",
      "category": "Personal Investigation",
      "budget": "5555",
      "views": "0",
      "status": "984",
      "id": 7040,
      "country": "India",
      "state": "Kerala",
      "quote": {
        "ref_id": "61",
        "agent_id": 7042,
        "p_id": 7039,
        "created_on": "2017-10-09 10:41:15"
      }
    }
  }]
};

new Vue({
  el: '#quotes',
  data: {
    posts: [],
    has_no_posts: true
  },
  mounted: function() {
    var self = this;
    setTimeout(function() {
      self.posts = e.data;
      self.has_no_posts = e.data.length > 0;
    }, 0);
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="quotes">
  <div v-for="post in posts" class="mke_">
    <span v-bind:id="post.p_id">{{post.post.category}} - {{post.post.country}} - {{post.post.state}}</span>
  </div>
</div>