[英]Creating a dynamic gridlist in VUEJs
I have been lately interested in VueJs and looking for a simple way to create a dynamic gridlist in VUEJs for firstName, lastName and images per person. 我最近对VueJ感兴趣,并正在寻找一种简单的方法在VUEJ中为每人的firstName,lastName和图像创建动态网格列表。
Here is what i tried and its looks 这是我尝试过的样子
<v-subheader>myList</v-subheader>
<v-container fluid grid-list-sm>
<v-layout row wrap>
<v-flex v-for="item in customer.images" :key="item.id" xs4>
<img :src="item.image" class="image" alt="lorem" width="50px" height="500px">
</v-flex>
</v-layout>
</v-container>
<script>
date()=>({
customer:{
id:"",
firstName:"",
lastName:"",
images:[], <----array od objects {id:"", image:""}
}
});
</script>
try this inside your v-container 在您的v容器中尝试一下
<v-layout row wrap v-for="item in customer" :key="item.id">
<v-layout row wrap>{{item.firstName + ' ' + item.lastName}}</v-layout>
<v-flex v-for="pic in item.images" :key="pic.id" xs4>
<img :src="pic.image" class="image" alt="lorem" width="50px" height="500px">
</v-flex>
</v-layout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.