如何使用 vueJS 在内部数组中显示 JSON 数据？

Question

我的 vueJS 代码是：

<script>
  new Vue({
    el: '#feed' ,
    data: {
      data: [],
    },
    mounted() {
      this.$nextTick(function() {
        var self = this;
        var id = window.location.href.split('=').pop();
        console.log(id);
        $.ajax({
          url: "https://n2s.herokuapp.com/api/post/get/5",
          method: "GET",
          dataType: "JSON",
          success: function (e) {
            if (e.status == 1) {
              self.data = e.data;
              console.log(e.data)
            } else {
              console.log('Error occurred');
            }
          }, error: function(){
            console.log('Error occurred');
          }
        });
      });
    },
  })
</script>

这是我显示值的 html 代码

<div class="m-single-article" id="feed">
  <p>{{details.bussinessName}}</p> //already printed
  <p>{{details.pid}}</p> //already printed
  <p>{{details.inventory}}</p> //////NOT PRINTING
  <p>{{details.sub_category}}</p> ////// NOT PRINTING
</div>

我能够打印除库存和子类别之外的所有数据。请

url 将提供 json 数据为：

{"status": true, "data": {"pid": 10, "bussinessName": "Ey technology", "services": "1, 3, 4, 2", "inventory": ["specs", "Eye Testing", "Lens", "Doctors"], "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM", "description": "Good technology company for software", "category": 1, "sub_category": ["Homeo pathy", "Web development"], "lat": 9.5274336, "lon": 76.8224309, "contactName": "simon", "contactEmail": "simon@gmail.com", "contactOfficeAddress": "korno solutions", "contactNumber": "1236547859", "contactOfficeNumber": "858547896", "state": "Canada", "city": "Oranto", "place": "Orania", "pincode": 895621, "referer": 24, "link": 24, "views": 0, "package": 1, "listing_pic": "default", "website": "www.ey.com"}}

通过尝试，我无法显示库存 [] 和子类别 [] 的值。任何人都可以帮我解决我的问题。

我也得到了 1,2,3,4 的服务。有什么方法可以映射到另一个提供服务名称的 json 数据。 https://n2s.herokuapp.com/api/post/get_all_services/

Answer 1

您需要v-for。

new Vue({
  el: '#feed' ,
  data: {
    details: [],
  },
  mounted() {
    this.$nextTick(function() {
      var self = this;
      var id = window.location.href.split('=').pop()
             console.log(id)
      $.ajax({
            url: "https://n2s.herokuapp.com/api/post/get/5",
            method: "GET",
            dataType: "JSON",
            success: function (e) {
                if (e.status == 1) {
                    self.details = e.data;
                    console.log(e.data)
                }
                else
                {
                    console.log('Error occurred');}
            }, error: function(){
            console.log('Error occurred');
            }
        });
    })
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m-single-article" id="feed">
<p>{{details.bussinessName}}</p> 
<p>{{details.pid}}</p>
<p v-for="inv in details.inventory">{{inv}}</p>
<p v-for="sub in details.sub_category">{{sub}}</p>
</div>