新しいデータを取得する処理方法

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に自動排除されます。

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-ifのv-showを使用する必要があります