web-dev-qa-db-fra.com

Vue Trigger watch on monté

J'ai un composant vue ci-dessous sur lequel je veux regarder pour qu'il se déclenche quand il est monté. Comment faire?

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';
            }
        },
    },
});
vue.jsvuejs2vue-component
11
Raza

Je pense que vous pourriez être mieux servi par un calcul dans ce cas.

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

Mais si vous voulez vraiment utiliser un observateur, résumez le code que vous faites dans la montre dans une méthode et appelez-le à partir de monté.

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)
    },
  },
});
6
Bert

C'est un peu un vieux post, et peut-être que cette fonctionnalité n'était pas dans vue à l'époque, mais au moins maintenant (dans vue 2.x ), il existe un moyen de le faire dans l'observateur lui-même.

VOUS DEVEZ DÉFINITIVEMENT CONSIDÉRER UNE PROPRIÉTÉ INFORMATIQUE AVANT DE FAIRE CECI . Les propriétés calculées présentent de nombreux avantages et, le plus souvent, elles constituent la meilleure solution. Cette fonctionnalité ne doit être utilisée que si les propriétés calculées sont insuffisantes.

Les observateurs peuvent être un objet au lieu d'une simple fonction, et ils prennent une propriété appelée immediate qui indique vue pour exécuter l'observateur au chargement. La fonction qui est exécutée est alors dans la propriété handler. Ainsi, dans votre exemple, votre observateur pourrait être

watch: {
    value: {
        handler: function(value) {
            if (value == 'Y') {
                this.class = 'checked';
            } else {
                this.class = 'unchecked';
            }
        },
        immediate: true
    },
}

Documents API: https://vuejs.org/v2/api/#watch

Dans ce cas spécifique, une propriété calculée pour class serait certainement mieux, mais l'a publié juste au cas où d'autres personnes tomberaient sur ce post avec un cas où une propriété calculée ne ferait pas (comme je l'ai fait).

24
obermillerk