javascript - v-for 在每个函数执行时

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>