Question

{"status": true, "data": {"basic": {"dob": "2018-02-02", "gender": "male",  "contact": {"address": null}, "is_new": false, "is_email_verified": false, "is_phone_verified": false}, "listings": [{"pid": 109, "category": {"name": "Education"}, "location": {"lat": 10.029198696886, "lon": 76.5399751853028, "state": "Kerala", "country": "India", }, "contact": {"email": "so@gmail.com", "phone": 8547933472, "address": {"country": "India", "state": "Kerala", "name": "allen", "pincode": 686585, "streetAddress": "College of Engineering", "locality": "Kottayam", "city": "Koovappally"}}, "about": "ho are you sd dfb df sdfbgf dsfbgf dsgbf dsfbgfnh dsbgnfh dsgfn zcfvgb fgb dsfg dfcbg dsfbg sdfdgbf df","package": {"planId":4, "validity": 500}, "is_featured": false, "images": [{"url": "/listing_images/default.jgp"}, {"url": "/listing_images/1518600363.50679_jomy.jpg"}]}], "total_listings": 1}}

如何才能仅显示图像[]中的第一张图像？

目前，我正在使用代码

    <div id="dash">
    <div class="col-md-4 p0" v-for="listing in data.listings">
     <div class="box-two proerty-item">
    <div class="item-thumb" v-for="ims in listing.images">
     <a v-bind:href="'/details/'+listing.pid">
<img  v-bind:src="'https://com'+ims.url"></img>
</a>
    </div>
    </div>
    </div>
    </div>

当我使用此代码时，所有图像都会出现。但我需要只显示第一张图片。当我使用img.url [0]时，它无法正常工作。请帮我解决一下？

我的vue js代码是

 <script>
dash = new Vue({
    el: '#dash',
    data: {
        data: {
        listing: {},
        },
        authType: '{{uid}}',
    },
mounted() { 

 var self = this; 
  data = {};
    data['auth-token'] = this.authType;
 $.ajax({ 
 url: "http://127.0.0.1:8000/alpha/user/profile/", 
  data: data,
type: "POST",
dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
  self.data = e.data;
            }
            },
        });

    },
})
</script>

Answer 1

在您的第一个 v-for 中，您正在遍历 data.listings ：在 listing.images

中显示您不需要第二个 v-for 的第一张图片

像这样更改 item-thumb 块：

<div class="item-thumb">
  <a v-bind:href="'/details/'+listing.pid">
    <img  v-bind:src="'https://com'+listing.images[0].url"></img>
  </a>
</div>

如何才能从json数据中仅显示images []中的第一个图像？

1 个答案: