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

Posted 2023-02-22

【中文标题】如何在 vuejs 中的以下示例中显示 post 中的值？

【英文标题】：How to display values in post in following example in vuejs?如何在 vuejs 中的以下示例中显示 post 中的值？

【发布时间】：2018-03-25 22:21:23

【问题描述】：

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

);

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

【问题讨论】：

你的名字是“Secret Coder”吗，因为你的代码格式难以阅读，对任何不想拆开它的人来说都是秘密？

如何使用 v-for 在帖子中显示值？？

【参考方案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>

【讨论】：

我删除了您问题的 attachment_preview 部分，因为它不存在于示例数据中。