如何在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>

this is my vue js code to get the values, The values obtained is in the above format

              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;
      }
    }
  });
}
});

This is my code to display the same which is getting error. So somebody please help me to didplay the same

Answer 1

You have to be more careful with your data. First issue: you assign the result of your ajax query to self.data instead of self.posts. Second issue: every "post" actually contains another "post" object with the actual post properties. So you need to use post.post.category to grab that. See the below snippet. Note: I replaced your aja call with a setTimeout(0). Finally, you should turn has_no_posts into a computed property that depends on 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>

</div>