vueコンポーネントでループが完了した後、どのようにステートメントまたはメソッドを呼び出すことができますか？このような

Question

マイVUEコンポーネント：

<template> 
    <div class="row"> 
     <div class="col-md-3" v-for="item in items"> 
      ... 
     </div> 
    </div> 
</template> 
<script> 
    export default { 
     ... 
     computed: { 
      items() { 
       ... 
      } 
     }, 
     ... 
    } 
</script> 

ループ完了した場合には、私は、ステートメントまたはメソッドを呼び出したいので

文はループが、私はそれを行うことができますどのように

を完了したときに実行されます？

更新：

キラサンの答えから、私はこのようにしてみてください：

<template> 
     <div class="row"> 
      <div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}"> 
       ... 
      </div> 
     </div> 
    </template> 
    <script> 
     export default { 
      ... 
      computed: { 
       items() { 
        const n = ... 
        return n 
       } 
      }, 
      directives: { 
       forCallback(el, binding) { 
        let element = binding.value 
        if (element.key == element.array.length - 1) 
        if (typeof element.callback === 'function') { 
        element.callback() 
        } 
       } 
      }, 
      methods: { 
       callback() { 
        console.log('v-for loop finished')   
       } 
      } 
     } 
    </script> 

コンソールログが

私の項目を表示しないにconsole.logを行う場合（オブジェクト

ですn）アイテムでは、次のような結果が得られます。

Answer 1

この例を見てください。

new Vue({ 
 
    el: '#app', 
 

 
    computed: { 
 
    items() { 
 
     return {item1: 'value1', item2: 'value2'} 
 
    } 
 
    }, 
 

 
    methods: { 
 
    callback() { 
 
     console.log('v-for loop finished') 
 
    } 
 
    }, 
 

 
    directives: { 
 
    forCallback(el, binding) { 
 
     let element = binding.value 
 
     var key = element.key 
 
     var len = 0 
 

 
     if (Array.isArray(element.array)) { 
 
     len = element.array.length 
 
     } 
 

 
     else if (typeof element.array === 'object') { 
 
     var keys = Object.keys(element.array) 
 
     key = keys.indexOf(key) 
 
     len = keys.length 
 
     } 
 

 
     if (key == len - 1) { 
 
     if (typeof element.callback === 'function') { 
 
      element.callback() 
 
     } 
 
     } 
 
    } 
 
    }, 
 

 
})

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

 
<div id="app"> 
 
    <div class="row"> 
 
     <div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}"> 
 
      ... 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

これは、directiveで実現できます。

使用例：

<div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}"> 
    <!--content--> 
</div> 

v-forでレンダリングされた要素を追跡する新しいディレクティブfor-callbackを作成します。基本的に現在のkeyがarrayの最後であるかどうかをチェックします。そうであれば、提供するcallback関数を実行します。

Vue.directive('for-callback', function(el, binding) { 
    let element = binding.value 
    if (element.key == element.array.length - 1) 
    if (typeof element.callback === 'function') { 
     element.callback() 
    } 
}) 

または、グローバルに定義したくない場合。これをコンポーネントオプションに追加してください：

directives: { 
    forCallback(el, binding) { 
     let element = binding.value 
     if (element.key == element.array.length - 1) 
     if (typeof element.callback === 'function') { 
     element.callback() 
     } 
    } 
} 

v-for-callbackはオプションオブジェクトが必要です。

{ 
    key: key, // this will contain the item key that was generated with `v-for` 
    array: items, // the actual `v-for` array 
    callback: callback // your callback function (in this example, it's defined in the component methods 
} 

は、その後、あなたのコンポーネントのオプションで：

<template> 
    <div class="row"> 
     <div class="col-md-3" v-for="(item, index in items)"> 
      <div v-if="index === items.length -1"> 
       Display what ever you want here 
      <\div> 
     </div> 
    </div> 
</template> 

それとも、その後、jsの中で何かをしたい場合：ループ内であれば

methods: { 
    callback() { 
     console.log('v-for loop finished')   
    } 
} 

Answer 3

あなたはこのように、と行うことができます次のように、同じ条件が真の場合に関数を呼び出します。

<div class="col-md-3" v-for="(item, index in items)"> 
      <div v-if="index === items.length -1 && lastIteration()"> 
       Display what ever you want here 
      <\div> 
     </div> 

methods: { 
    lastIteration() { 
    alert("last"); 
} 
} 

私はそれをテストしませんでしたが、理想は良いです、それは動作するはずです。あなたの質問にお答えしたいと思います:)