If you're building a web app at some point there will be a list of data you need on the screen. The data might be in a table, a bullet list or options to choose from on a form. With Vue, displaying that data is not a big trick.
Let's see how it's done!
The List Data
Say you have a simple list of countries and their short codes to render in various parts your app. This list will probably change, so you want it generated in one Vue file.
Setting It Up
To use Vue in your application, you need 3 things:
- Vue loaded
- An element to contain the code
- The code to display content.
For this tutorial, we'll use a simple HTML file to run the app.
The HTML File
Your HTML page should look like:
<html lang="en">
<head>
<!-- Load Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Load script file. 'defer' loads after body is generated -->
<script src="vue_lists.js" defer></script>
</head>
<body>
<h1>List</h1>
<div id="app">
<!-- Div where Vue runs -->
</div>
</body>
</html>Notice your app file has 'defer' in the script tag. Defer means the script will load after the document has loaded. That makes sure the container element for the app is loaded before the app code loads.
The App File
Now the app file (aka vue_lists.js):
var app = new Vue({
el: '#app',
data: {
countries_list: [
{ "name": "Canada", "code": "CAN" },
{ "name": "Mexico", "code": "MEX" },
{ "name": "United States of America", "code": "USA" }
],
}
})Breaking It Down:
The important thing here is:
data: {
countries_list: [
....
]}This means the data for this app has an array of objects called 'countries_list'. All we have to do is display the array of objects in the HTML file.
Displaying Data in HTML
Normally in Vue, you display data in HTML by putting it inside curly brackets {{ data_object }}. Since this is an array of objects, that's not going to work. You need to iterate through the array to access each item. The v-for directive does exactly that.
<ul id="country_list">
<li v-for="country in countries_list">
{{ country.name }} ({{ country.code }})
</li>
</ul>Breaking It Down
The "v-for" is similar to "for each". It goes through the array, one item at a time, and creates another element. In this case another <li>.
The "country in countries_list" means "for each item in the array countries_list, the current one will be called country".
The results are exactly what we want.
- Canada (CAN)
- Mexico (MEX)
- United States of America (USA)
Putting it all together:
<html lang="en">
<head>
<!-- Load Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Load script file. 'defer' loads after body is generated -->
<script src="vue_lists.js" defer></script>
</head>
<body>
<h1>List</h1>
<div id="app">
<ul id="country_list">
<li v-for="country in countries_list">
{{ country.name }} ({{ country.code }})
</li>
</ul>
</div>
</body>
</html>Table
Of course creating a table of data works the same way.
<table>
<tr>
<th>Country</th>
<th>Short Code</th>
</tr>
<tr v-for="country in countries_list">
<td>{{ country.name }}</td>
<td>{{ country.code }}</td>
</tr>
</table>Select Elements
And it's the same idea for populating a select elements.
<select name="country_code">
<option v-for="country in countries_list" v-bind:value="country.code">
{{ country.name }}
</option>
</select>Wait a minute! What's with this "bind" thing?
"v-bind:value="country.code"
In Vue, curly brackets don't work for setting attributes in a tag. Instead, you use v-bind to tie data to an attribute.
The thing to know is, you can bind a single value (country.code), or the entire object (country). Very helpful when you need the whole data object to work with!
Conclusion
As your can see, displaying an array of data is really just using the v-for directive. Having it in HTML gives you all the flexibility you need to display and format the data. Yeah, it's that simple.
Also, because it's in Vue, it's easy to drop into any web project, even WordPress.
Download code: Github
Latest comments (1)
Hi Lisa!