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来抓住它。请参阅以下代码段。注意：我用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>

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

1 个答案: