v-ifが何かをトリガーできますか？ v-ifはイベントを発生させますか？

Question

私はイベントをキャッチし、v-ifがトグルするときに何かしたいと思います。条件付きレンダリングされた要素がレンダリングされます。これを知らせることは可能でしょうか？

Answer 1

条件付きレンダリングの真実性を担うプロパティ（v-if）にwatcherを設定できます。

HTML

<div id="app"> 
    <div v-if="toggleElement">MY ELEMENT</div> 
    <button @click="toggleElement = !toggleElement">TOGGLE</button> 
</div> 

スクリプト

new Vue({ 
el: '#app', 
    data: { 
     toggleElement: false 
    }, 
    watch: { 
     toggleElement(newValue){ 
      //do something if toggleElement changes 
      alert("Element's v-if toggled"); 
     } 
    } 
}) 

ここfiddle

Answer 2

コンポーネントに適用される場合は、mountedがトリガーされます。だから、

あなたの親にあなたが持っているならば：

<template> 
<div> 
<child v-if='test'/> 
</div> 
</template> 

テストが変更された場合、あなたは子供のmountedを誘発するだろうし。

Answer 3

これは、v-ifスイッチ式から何かを直接呼び出すことで実行できます。あなたのスイッチ式はもはや純粋な関数ではなく、私は純粋な良心を持っているかどうかはわかりませんが、うまくいきます。だから... ...

<div v-if='mySwitch && doSomething()'> 

Hereは、それが働いて示しフィドルです。