Question

我希望以每次执行函数时生成新li元素的方式使用v-for。像这样的东西

<ul>
    <li v-for:"someFunction()">Function started</li>
</ul>

new Vue({
    ...
    methods: {
        someFunction: function() {
            //do some stuff
        }
    }
});

有没有办法实现这个目标？

Answer 1

That's not how v-for works.

您应该创建一个数组数据属性，并在每次调用该函数时将其推送到该属性。然后在v-for指令中使用该属性：

new Vue({
  el: '#app',
  data() {
    return { items: [] };
  },
  methods: {
    someFunction: function() {
      this.items.push({});
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in items">Function started</li>
  </ul>
  
  <button @click="someFunction">Call Function</button>
</div>

或者，如果您只是需要跟踪方法被触发的次数，您可以传递v-for个数字：

new Vue({
  el: '#app',
  data() {
    return { count: 0 };
  },
  methods: {
    someFunction: function() {
      this.count++;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="n in count">Function started</li>
  </ul>
  
  <button @click="someFunction">Call Function</button>
</div>

Answer 2

只需使用变量：

<ul>
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

new Vue({
    ...
    data () {
      return {
         items: {message: 'Test 1', message: 'Test 2'}
      }
    },
    methods: {
        someFunction: function() {
            this.items.push( {message: 'Test 3'} )
        }
    }
});

v-for每个函数执行

2 个答案: