Vue.js：コンポーネントの初期化時にウォッチャー関数を呼び出す方法

Question

時々、データプロパティの変更に応じて関数を呼び出す必要があります。しかし、データプロパティの初期値に対して起動する関数も必要です。

技術的に監視されているプロパティがまだ変更されていないため、コンポーネントの初期化時にウォッチャが起動しません。だから、methodsオブジェクトに関数を入れて、ウォッチャーとmountedフックでそのメソッドを呼び出すことになります。ここで

は例です：

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     selectedIndex: 0, 
 
    } 
 
    }, 
 
    methods: { 
 
    focusSelected() { 
 
     this.$refs.input[this.selectedIndex].focus(); 
 
    } 
 
    }, 
 
    watch: { 
 
    selectedIndex() { 
 
     this.focusSelected(); 
 
    } 
 
    }, 
 
    mounted() { 
 
    this.focusSelected(); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="i in 4"> 
 
    <input ref="input"/> 
 
    <button @click="selectedIndex = (i - 1)">Select</button> 
 
    </div> 
 
</div>

は私がコンポーネントの初期化時ウォッチャー火を持ってできるようにするための方法はありますか？

Answer 1

Watchers in Vueはimmediate価値を提供するためのオプションがあります：オプションでimmediate: trueに渡す

あなたは、この場合、表現

の現在の値と、すぐにコールバックを可能性がトリガされますmountedフックにウォッチャーを設定します。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     selectedIndex: 0, 
 
    } 
 
    }, 
 
    mounted() { 
 
    this.$watch('selectedIndex', (i) => { 
 
     this.$refs.input[i].focus(); 
 
    }, { immediate: true }); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="i in 4"> 
 
    <input ref="input"/> 
 
    <button @click="selectedIndex = (i - 1)">Select</button> 
 
    </div> 
 
</div>

---

また、そのようwatchオブジェクト内のウォッチャーのためのimmediateオプションを指定することができます。

watch: { 
    foo: { 
    immediate: true, 
    handler(value) { 
     this.bar = value; 
    } 
    } 
}