V-ifの内容が変更されたことを検出する方法

Question

v-if条件がfalseになったときにjquery selectorをクラス "wrong"に適用しようとしていますが、どうすればv-ifの変更を聞くことができますか？

<template> 
 
    <div class="view1"> 
 
    <div v-if="ok"> 
 
    <p class="right">OK</p> 
 
    </div> 
 
    <div v-else> 
 
    <p class="wrong">NO</p> 
 
    </div> 
 
    </div> 
 
</template> 
 
<script> 
 
    export default { 
 
    mounted(){ 
 
     $('.wrong').animate({width:'20%'},2000); 
 
    } 
 
    } 
 
</script>

Answer 1

あなたはCSSではなく、jQueryを使ってこれを行うことができます。トリックは、幅の遷移と、幅のスタイルの適用の遅延を持つことです。 watchを使用して変更を聞きます。

new Vue({ 
 
    el: '.view1', 
 
    data: { 
 
    ok: true, 
 
    delayedReaction: null 
 
    }, 
 
    methods: { 
 
    toggle() { 
 
     this.ok = !this.ok; 
 
    } 
 
    }, 
 
    watch: { 
 
    ok() { 
 
     if (this.ok) { 
 
     this.delayedReaction = null; 
 
     } else { 
 
     // nextTick didn't suffice 
 
     setTimeout(() => { 
 
      this.delayedReaction = { 
 
      width: '20%' 
 
      }; 
 
     }, 0); 
 
     } 
 
    } 
 
    } 
 
});

.wrong { 
 
    background-color: #fdd; 
 
    transition: width 2s; 
 
    width: 100%; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div class="view1"> 
 
    <div v-if="ok"> 
 
    <p class="right">OK</p> 
 
    </div> 
 
    <div v-else> 
 
    <p class="wrong" :style="delayedReaction">NO</p> 
 
    </div> 
 
    <button @click="toggle">Toggle</button> 
 
</div>