如何处理获取新数据？

Question

我有Vue-JS应用程序。使用后点击变量rasters_previews_list获取新数据。我想与他们产生清单。我无法理解我应该使用哪个指令来处理这个问题。

这里是我的代码：

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: 
      { 

      } 

     }); 

我应该使用v-on或v-if？

Answer 1

当rasters_previews_list改变时，列表v-for是autorendered。

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>

附加：必须使用v-show代替v-if这种情况