Question

{
  "basic": {
    "clanId": 3,
    "earning": 0.0
  },
  "length": 2,
  "members": [{
    "data": {
      "basic": {
        "name": " ",
        "userType": 2,
        "username": "sobinmathew"
      },
      "wallet": {
        "amount": 0.0,
        "tds": 0.0
      }
    }
  }, {
    "data": {
      "basic": {
        "name": " ",
        "userType": 2,
        "username": "joselouis"
      },
      "wallet": {
        "amount": 0.0,
        "tds": 0.0
      }
    }
  }],
  "status": true,
  "total_earnings": 0.0,
  "clan_divsions": 1,
  "checkout_total_listings": 0
}

如何在html文件中显示成员[]？

我目前的代码是。这是我的vue js代码

<script>
dash = new Vue({
  el: '#dash',
  data: {
    clans: {
      basic: [],
      members: {
        data: {
          basic: [],
        },
      },
    },
  },
  mounted() {
    var self = this;
    data = {};
    $.ajax({
      url: "http://127.0.0.1:8000/alpha/get/my/clan/",
      data: data,
      type: "POST",
      dataType: 'json',
      success: function (e) {
        if (e.status == 1) {
          self.clans = e;
          console.log(self.clans);
          self.members = e.members;
        }
      },
    });
  },
})
</script>

我的HTML代码如下。我正在使用v-for来显示值

<div id="dash">

 <div v-for="ibn in clans.members">{{ibn.data.members.data.basic.name}}</div>

</div>

当我尝试这种方式时，我收到错误？有人可以帮我显示以下数据吗？如何能够从数据中显示成员的名称

Answer 1

假设e看起来像问题顶部的JSON，你真的应该只需要

<div v-for="ibn in clans.members">{{ibn.data.basic.name}}</div>

您的代码可以进行一些清理。您应该初始化data以尽可能多地查看获取的数据，例如

data: {
  clans: {
    basic: {}, // an object, not array
    members: [] // an array, not an object
  }
}

演示〜https://jsfiddle.net/u13j8p2h/

在vue js中显示以下值？

1 个答案: