Practice Set 1 - VueJS

by rachelmc_

HTML

<h2>
  VueJS Template Exercise: iterating a list
</h2>
<p>
  In this exercise, we've created a Vue object in JavaScript and a DIV element in the HTML. Your task is to use the Vue template language to create an HTML unordered list of all the items in the Vue object's <code>progammingLanguages</code> array. 
</p>
<p>
  To do this, you'll use an iterator (consider the &lt;v-for&gt; directive). 
</p>

<div id="app">
    [ Your code goes here ]
    <ol v-for="programmingLanguage in programmingLanguages">
      <li>{{ programmingLanguage.name}}</li>
    </ol>
</div>

JavaScript

var v = new Vue({
    el: '#app',     // this is a selector for the HTML element that contains our Vue template
    data: {
       programmingLanguages : [
      { name: "JavaScript" },
      { name: "Python" },
      { name: "PHP" },
      { name: "Julia" }
     ]  
    }
});