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