Using Vue to Display Lists
Tags: vue, beginners, javascript, webdev
Published: 2019-05-03 17:43:55

---
title: Using Vue to Display Lists
published: true
description: How to display an array of data in Vue.
tags: #vue #beginner #javascript #webdev
---
{% raw %}

<p>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. <br>Let's see how it's done!</p>



<h1>The List Data</h1>



<p>Say you have a simple list of countries and their short codes to render in various parts your app. This list will probably change,&nbsp; so you want it generated in one Vue file.</p>



<h1>Setting It Up</h1>



<p>To use Vue in your application, you need 3 things:</p>



<ol><li>Vue loaded</li><li>An element to contain the code</li><li>The code to display content.</li></ol>



<p>For this tutorial,&nbsp;we'll use a simple HTML file to run the app.</p>



<h2>The HTML File</h2>



<p>Your HTML page should look like:</p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_lists.js" defer&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;List&lt;/h1&gt;
    &lt;div id="app"&gt;
       &lt;!-- Div where Vue runs --&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>



<p>Notice your app file has 'defer' in the script tag.&nbsp;&nbsp;Defer means the script will load <em>after</em> the document has loaded.&nbsp; That makes sure the container element for the app is loaded before the app code loads.</p>



<h2>The App File</h2>



<p>Now the app file (aka vue_lists.js):</p>



<pre class="wp-block-code"><code>var app = new Vue({
    el: '#app',
    data: {
        countries_list: [
            { "name": "Canada", "code": "CAN" },
            { "name": "Mexico", "code": "MEX" },
            { "name": "United States of America", "code": "USA" }
        ],
    }
})</code></pre>



<h3>Breaking It Down:</h3>



<p>The important thing here is:</p>



<pre class="wp-block-code"><code>data: {
countries_list: [
....
]}</code></pre>



<p>This means the data for this app has an array of objects called 'countries_list'.&nbsp; All we have to do is display the array of objects in the HTML file.</p>



<h1>Displaying Data in HTML</h1>



<p>Normally in Vue, you display data in HTML by putting it inside curly brackets {{ data_object }}.&nbsp; Since this is an <em>array </em>of objects, that's not going to work.&nbsp; You need to iterate through the array to access each item. The <strong>v-for</a></strong></span> directive does exactly that.</p>



<pre class="wp-block-code"><code>&lt;ul id="country_list"&gt;
    &lt;li v-for="country in countries_list"&gt;
        {{ country.name }} ({{ country.code }})
     &lt;/li&gt;
&lt;/ul&gt;</code></pre>



<h3>Breaking It Down</h3>



<p>The "v-for" is similar to "for each".&nbsp; It goes through the array, one item at a time, and creates another element.&nbsp; In this case another &lt;li&gt;.</p>



<p>The "country in countries_list" means "<em>for </em>each item <em>in </em>the array<em> countrie</em>s<em>_list</em>, the current one will be called <em>country</em>".<br>The results are exactly what we want.</p>



<ul><li>Canada (CAN)</li><li>Mexico (MEX)</li><li>United States of America (USA)</li></ul>



<p>Putting it all together:</p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_lists.js" defer&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;List&lt;/h1&gt;
    &lt;div id="app"&gt;
       &lt;ul id="country_list"&gt;
          &lt;li v-for="country in countries_list"&gt;
            {{ country.name }} ({{ country.code }})
         &lt;/li&gt;
       &lt;/ul&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>



<h2>Table</h2>



<p>Of course creating a table of data works the same way.</p>



<pre class="wp-block-code"><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;Country&lt;/th&gt;
        &lt;th&gt;Short Code&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr v-for="country in countries_list"&gt;
        &lt;td&gt;{{ country.name }}&lt;/td&gt;
        &lt;td&gt;{{ country.code }}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>



<h2>Select Elements</h2>



<p>And it's the same idea for populating a select elements.</p>



<pre class="wp-block-code"><code>&lt;select name="country_code"&gt;
    &lt;option v-for="country in countries_list" v-bind:value="country.code"&gt;
        {{ country.name }}
    &lt;/option&gt;
&lt;/select&gt;</code></pre>



<p>Wait a minute!  What's with this "bind" thing?</p>



<pre class="wp-block-preformatted">"v-bind:value="country.code"</pre>



<p>In Vue, curly brackets don't work for setting attributes<em> </em>in a tag.&nbsp; Instead, you <strong>use v-bind to tie data to an attribute</strong>.</p>



<p>The thing to know is, you can bind a <em>single value</em> (country.code), or the <em>entire object</em> (country). Very helpful when you need the whole data object to work with!</p>



<h1>Conclusion</h1>



<p>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.  </p>



<p>Also, because it's in Vue, it's easy to drop into any web project, even <a href="https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l" target="_blank">WordPress.</a></p>

<p>Download code: <a href="https://github.com/workingwebsites/vue_lists" target="_blank">Github</a></p>

{% endraw %}