如何在 vuejs 中显示以下值？答案

【问题标题】：How to display following values in vuejs?如何在 vuejs 中显示以下值？
【发布时间】：2024-05-23 12:10:02
【问题描述】：

{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial"}

如何使用vue js显示以上DATA值？

目前我使用，但不工作..

 <table>
 <tbody>
     <tr v-for="post in posts">
      <td>{{ post.p_id }}</td>
     </tr>
</tbody>
</table>

【问题讨论】：

这是 ajax 响应吗？
{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial"} 这是你的data吗？
您如何获得此回复并显示您的Vue js 代码？

标签： javascript php html vue.js

【解决方案1】：

您给定的数据不完整。如果给定的数据是 posts 响应使用 posts.data 而不是 posts

var vm = new Vue({
  el: '#vue-instance',
  data: {
    posts:{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial"}]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
 <table >
 <tbody>
    <tr v-for="post in posts.data">
      <th >Ref Id</th>
      <th >Agent Id</th>
      <th >PID</th>
     </tr>
     <tr v-for="post in posts.data">
      <td>{{ post.ref_id }}</td>
      <td>{{ post.agent_id }}</td>
      <td>{{ post.p_id }}</td>
     </tr>
</tbody>
</table>
</div>

【讨论】：