Vue - v-for directive for loop

Question

Example of displaying a list of items using the data from an Array:

<div id="landrover">
  <ol>
    <li v-for="rig in rigs">
      {{ rig.model }}
    </li>
  </ol>
</div>

<script>
  var landroverAll = new Vue({
    el: '#landrover',
    data: {
      rigs: [
        { model: 'Defender' },
        { model: 'Range Rover' },
        { model: 'Discovery TD5' }
      ]
    }
  })
</script>

<!--Output:-->
<!---->
<!---->
<li>
  Defender
</li>
<li>
  Range Rover
</li>
<li>
  Discovery TD5
</li>

<!--Try to console to see the appended item to the list-->
<!--landroverAll.rigs.push({ model: 'New item' }).  -->

 

Answer 1

<script>
    // pass to js
    var propertyData = {};  
    propertyData['events-timeline'] = '[{"date":"13th October 2017","description":"Property listed on resale market"},{"date":"12th October 2017","description":"Purchase completed"},{"date":"8th September 2017","description":"Contracts exchanged"}]';
    propertyData['events-timeline'] = JSON.parse('[{"date":"13th October 2017","description":"Property listed on resale market"},{"date":"12th October 2017","description":"Purchase completed"},{"date":"8th September 2017","description":"Contracts exchanged"}]');
  </script>

<!--use v-for to get value from data array-->
<li v-for="event in propertyData['events-timeline']">
  <span class="title">{{event.description}}</span>
  <span class="date">{{event.date}}</span>
</li>

 

Answer 2

<!--fotorama-->
<div class="fotorama" data-nav="thumbs">
  <a v-for="img in images" :key="img" v-bind:href="img"><img :src="img" width="144" height="96"></a>
</div>