Question

如何通过模板知道v-for何时完成？

我使用了List组件（无法更改）：

<div v-for="view of items" :key="view.nr.id">
        <slot
          :item="view.item"
          :index="view.nr.index"
        />
</div>

在我的组件中设置：

 <list :items="items">
     <template v-slot="{ item, index }">
        blablabla
     </template>
 </list>

有一种方法可以知道v-for何时完成？像触发功能检查是否完成？我考虑做功能：

checkIfVForIsComplete(index) {
 if (index === this.items.length ) { console.log('yay complete!!'}
}

但是如何在模板中调用该函数？使用{{}}？对于:来说似乎很奇怪。

有什么想法可以解决这个问题吗？

Answer 1

这是您可以使用的两个示例，希望您可以继续进行下去：

new Vue({
  el: '#app1',
  data: {
    items: [1, 3, 5, 10]
  },
  methods: {
    checkIfVForIsComplete() {
      console.log('v-for complete - app 1')
    },
  },
})

new Vue({
  el: '#app2',
  data: {
    items: [1, 3, 5, 10]
  },
  methods: {
    checkIfVForIsComplete() {
      console.log('v-for complete - app 2')
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app1">
  <div
    v-for="(item, index) of items"
    :key="item" :class="index === items.length - 1 ? checkIfVForIsComplete() : null"
  >
    {{ index }} {{ items.length }}
  </div>
</div>

<div id="app2">
  <div v-for="(item, index) of items">
    {{ index === items.length - 1 ? checkIfVForIsComplete() : null }}
    {{ index }} {{ items.length }}
  </div>
</div>

如何在广告位范本中侦测v-for完成事件？

1 个答案: