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>

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 在每个函数执行时

v-for on every function execution

javascript

vue.js

v-for