web-dev-qa-db-fra.com

vue js 2: accès aux accessoires dans la fonction montée

J'ai des accessoires de données dans les composants enfants. À l'intérieur du composant enfant sur la fonction montée, j'ai besoin d'obtenir une valeur spécifique des accessoires et de définir une valeur de liste déroulante. J'utilise le plugin vue-multiselect qui fonctionne bien. Voici le code.

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      


        Vue.nextTick(function () {      
        // I want to access props here but it return 0 length array 
            console.log(vm.$parent.Subscriptions);
        });
    },  
    beforeUpdate() {
        let vm = this;
        console.log(vm.$parent.Subscriptions);
    },
//  updated() {
//      let vm = this;
//      console.log(vm.$parent.Subscriptions);
//  }
};

Maintenant, seule la fois où j'obtiens des abonnements est dans la fonction beforeUpdate et mise à jour, mais cela est appelé chaque fois qu'il y a un changement de valeur qui n'est pas requis. J'ai seulement besoin de le changer la première fois afin de définir une valeur initiale déroulante.

vue.jsvuejs2vue-component
10
Epistemologist

Pourquoi essayez-vous d'accéder aux accessoires de composants actuels via "$ parent"?

Cela devrait fonctionner comme ceci:

 module.exports = {
  props: ["Subscriptions"],
  mounted: function () {
      let vm = this;

      Vue.nextTick(function () {
        console.log(vm.Subscriptions);
      });
  },  
  beforeUpdate() {
    console.log(this.Subscriptions);
  },
  updated() {
    console.log(this.Subscriptions);
  }
};

Mise à jour:

Quoi qu'il en soit, je ne sais pas si vous avez besoin de la prochaine coche, essayez d'utiliser la fonction créée et sans nextTick.

created() {
  alert(this.Subscriptions);
},
6
V. Sambor

J'ai résolu un problème similaire en utilisant @watch. Peut-être que cela pourrait fonctionner?

module.exports = {
  props: ["Subscriptions"]

  // this mounted is probably not necessary
  mounted: function () {
    getSubscriptions(this.Subscriptions)
  },  

  watch: {
    Subscriptions: [{
      handler: 'getSubscriptions'
    }]
  },

  methods: {
    getSubscriptions(el) {
      console.log(el);
    }
  }
};
3
Arajay

Recevez les données des accessoires:

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      

        vm.$nextTick(function () {      
           console.log(vm.Subscriptions);
        });
    },
3
Vitaly

Une erreur courante pourrait être, le composant parent passe une variable comme accessoire qui est nulle au moment où le composant enfant est rendu. Ainsi, lorsque vous y accédez en monté dans le composant enfant. Vous le voyez comme une valeur nulle. Et plus tard, dans le composant Parent, la variable qui a été transmise (prop) sera affectée aux valeurs d'une opération asynchrone. Pour éviter les pièges possibles, mieux vaut utiliser v-if.

Exemple :

<ChildComponent :data="testData" />

au lieu de ci-dessus ci-dessous peut être utilisé

<ChildComponent v-if="testData" :data="testData" />

de sorte que ce n'est que lorsque le composant enfant testData disponible sera rendu. Mais si dans le composant enfant, vous avez plus de choses à afficher jusqu'à ce que les données arrivent mieux pour utiliser un autre composant. Et l'ajout d'observateurs résoudra également le problème, mais pas d'une manière jolie.

Puisque vous obtenez des valeurs dans le hook mis à jour, cela pourrait probablement être le cas.

2
dilantha111

C'est ma solution qui n'est pas parfaite mais ça marche.

mounted () {
 setTimeout(() => {
      console.log('Subscriptions')
  }, 2000)
}
1
moqiyuanshi