Vueトリガー・ウォッチ・オン・マウント

Question

私はそれがマウントされているときにトリガーするのを見たいと思っている以下のvueコンポーネントを持っています。それ、どうやったら出来るの？

Vue.component('check-mark', { 
    name: 'check-mark', 
    template: ` 
    <input :value="value"> 
    `, 
    props: { 
     value: { 
      type: String, 
      required: true, 
     }, 
    }, 
    mounted: async function() { 
     //trigger this.value watch() here 
    }, 
    watch: { 
     value: function (value) { 
      if (value == 'Y') { 
       this.class = 'checked'; 
      } else { 
       this.class = 'unchecked'; 
      } 
     }, 
    }, 
}); 

Answer 1

この場合、あなたはより良いサービスを提供できると思います。

computed:{ 
    class(){ 
    return this.value === 'Y' ? 'checked' : 'unchecked' 
    } 
} 

実際にウォッチャーを使用する場合は、ウォッチャーで行ったコードをメソッドに抽象化し、マウントしてから呼び出すことができます。

Vue.component('check-mark', { 
    name: 'check-mark', 
    template: ` 
    <input :value="value"> 
    `, 
    props: { 
    value: { 
     type: String, 
     required: true, 
    }, 
    }, 
    data(){ 
    return { 
     class: null 
    } 
    }, 
    methods:{ 
    setClass(value){ 
     if (value == 'Y') { 
     this.class = 'checked'; 
     } else { 
     this.class = 'unchecked'; 
     } 
    } 
    }, 
    mounted: function() { 
    this.setClass(this.value) 
    }, 
    watch: { 
    value: function (value) { 
     this.setClass(value) 
    }, 
    }, 
});