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？

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-show代替v-if

如何处理获取新数据？

1 个答案: