How to handle getting new data even?

Question

I have got Vue-JS app. After use click variable rasters_previews_list get new data. I would like to generate list with them. I can't understand which directive I should use to handle this even.

Here is my code:

var userContent = Vue.extend({
      template: `

    <div class="LayersMenuSectionContent" v-if="rasters_previews_list.length">

           <ul v-for="img in rasters_previews_list">
             <li>{{img.id}}</li> // generate list here
           <ul>
     </div>

          `,
        data: function ()  {
          return {

            rasters_previews_list: [] // when come new data I should generate li with then

          }

          },

          ready: function()
          { 

          },

          methods: 
          { 

          }

        });

Should I use v-on or v-if?

Answer 1

When rasters_previews_list is changed, list is autorendered in v-for.

new Vue({
  el: '#app',
  template: `
  <div class="LayersMenuSectionContent" v-show="rasters_previews_list.length">
    <ul v-for="img in rasters_previews_list">
      <li>{{img.id}}</li>
    <ul>
  </div>
  <button @click="add">Add</button>
          `,
  data: function ()  {
    return {
      rasters_previews_list: [] // when come new data I should generate li with then
    }
  },
  ready: function(){ },
  methods: { 
    add(){
      this.rasters_previews_list.push({id: 'hello'},{id: 'world'});
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="app"></div>

Extra: You must use v-show instead of v-if for this case