v-for在每个函数执行上

Question

我想用v-for的方式，它每次执行一个函数时都会产生一个新的li元素。像这样的东西

<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'}) 
     } 
    } 
});