새 데이터를 가져 오는 것을 어떻게 처리합니까?

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을 사용해야합니다