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

Это не так v-for работает.

Вы должны создать свойство данных массива и нажимать на него каждый раз, когда вызывается функция. Затем используйте это свойство в 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'} )
        }
    }
});