How to build a flexible gridlist in VUEJs

I've recently become intrigued by VueJs and am on the lookout for a straightforward method to create a dynamic gridlist in VUEJs featuring firstName, lastName, and images for each person.

Here's what I attempted, and here's how it turned out:

 <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

Give this a shot within your v-container

<v-layout row wrap v-for="item in client" :key="item.identifier">
    <v-layout row wrap>{{item.firstName + ' ' + item.lastName}}</v-layout>
    <v-flex v-for="pic in item.images" :key="pic.identifier" xs4>
        <img  :src="pic.link"  class="image" alt="ipsum" width="50px" height="500px">
    </v-flex>
</v-layout>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Continuing to encounter CORS issue despite configuring Access-Control-Allow-Origin and other Access-Control-Allow-* headers on the client side

My Vue application was created using the 'webpack-simple' option. I am attempting to send a 'GET' request to 'https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en' but I am encountering an error: ...

What is the most efficient way to retrieve the accurate current date from the server using nodeJS?

I am currently working on filtering the data being sent back to the user. My filter criteria includes the date, month, and year. While I have successfully filtered by date and month, I am encountering unexpected results when filtering by year. Below is ...

Ways to showcase a website within an HTML document using a URL?

Is it possible to show 2 webpages on a single aspx webpage? For instance, When a user opens the link for www.mywebsite.com, I would like to display both www.google.com and www.bing.com on my homepage. Behind the scenes, I will call two separate URLs an ...

Is that file or directory non-existent?

While working on developing a Discord bot, I keep encountering an error message stating: "Line 23: no such file or directory, open 'C:\Users\Owner\Desktop\Limited Bot\Items\Valkyrie_Helm.json']" even though the filep ...

Struggling to remove quotation marks from a string that was originally an array before being converted?

Here is the code snippet that I am struggling with: users = [{ "userid": "45", "name": "steve" }, { "userid": "32", "name": "john" }]; getuser = users.flatMap(user => user.userid === '32' ? user.name : []); result = getuser.toSt ...

Unregistering an event with AngularJS

Exploring the functions of a controller named MyCtrl: class MyCtrl { constructor($scope, $rootScope, ...) { this.$scope = $scope; this.$rootScope = $rootScope; this.doThis = _debounce(this.resize.bind(this), 300); ... ...

Create a universal function similar to onbeforeunload that works seamlessly across all web browsers

Can I implement an onbeforeunload function that works on all browsers? window.onbeforeunload = function () {/**/} I need to run a script when a link on my website is clicked. Currently, I'm using an onclick event-based script, but it doesn't f ...

Regular Expression designed specifically for detecting alternative clicks

When using ngpattern for validation, I have encountered an issue where my error message is displaying for a different reason than intended. The error message should only show if the field is empty or contains only special characters. <textarea name="ti ...

Retrieving user input from an angular controller function

I have a $resource object in Angular that looks like this: { _id: '1' items: [ {_id: 'a'}, {_id: 'b'}, {_id: 'c'} ] } My goal is to create a form with a checkbox for each element in the items array. In th ...

The expression "routerlink" in Angular 9 is not recognized,

Currently, I am in the process of developing an Angular 9 application and have encountered two challenging issues. Firstly, as I navigate through the routes using the navbar, I notice an error message in the console stating "Syntax error, unrecognized exp ...

Is it possible to change the input type of 'time' to a string when utilizing ng-change in AngularJS?

Is there a way to convert a time input into a string or a timestamp for Firebase support? For instance, the code below will not function correctly due to the time input type. HTML <html ng-app='app'> <head> <script src="http ...

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

Utilizing AngularJs to retrieve data through the $http get method

Struggling to pass data back to my controller from my service without success. The service works as I can see the response in console log, but not in the controller. Service: (function () { angular .module('app') .service('testServ ...

Having difficulty generating a footer for a page that includes a Material-UI Drawer component

Looking to create a standard full-width footer at the bottom of my page, I need help with the implementation. Utilizing the "Permanent drawer" from Material-UI Drawer for reference here. If you're interested in experimenting with it, CodeSandbox link ...

Identifying JavaScript Errors in a Web Page: A Guide to Cypress

Currently, I am working on creating a spec file that contains N it(s), with each it visiting a specific page within the application and returning the number of errors/warnings present. I have also shared my query here: https://github.com/cypress-io/cypres ...

Choose the initial option when filtering the selection box

I am encountering an issue with the script provided below. When the "product color" is changed multiple times, the preselected item in the fruit dropdown ends up being the last one from the previous array instead of the desired first option. For example, ...

A standard procedure for evaluating an application using JavaScript on the client side

I am looking to streamline E2E testing for a web application. The frontend of the app is built on a JavaScript framework, while the backend uses Java technology. While I am aware of the tools and frameworks available for JavaScript testing, I am curious ...

Mastering the BFCache management in React for optimal performance

Before redirecting to an external payment provider, I display a loading screen to account for longer load times. If the user decides not to complete the payment and navigates back using gestures or the browser's back button, the page is pulled from t ...

Tips for getting information from a GET/POST response message with superagent

I'm currently utilizing Node.js and Superagent for testing my server implementation. I have successfully sent a Superagent GET request and received a positive response with the code provided below. My goal is to extract and log only the "id" value fro ...

What is the best way to eliminate an Injected Script from my system?

I have added a script to my GWT Application using ScriptInjector ScriptInjector.fromUrl("js/jquery-1.7.2.min.js").setWindow(ScriptInjector.TOP_WINDOW).setCallback(new Callback<Void, Exception>() { @Override public ...