Question

我最近对VueJ感兴趣，并正在寻找一种简单的方法在VUEJ中为每人的firstName，lastName和图像创建动态网格列表。

这是我尝试过的内容和外观

 <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>

Answer 1

在您的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>

在VUEJ中创建动态网格列表

1 个答案: