3
votes

VueJS Comment accéder aux variables Mounted () dans les méthodes

Je suis nouveau dans Vue et j'aimerais avoir de l'aide sur la façon d'accéder et d'utiliser les variables créées dans Mounted () dans mes méthodes.

J'ai ce code

Modèle

mounted() {
    var allcards = this.$refs.allcards;
    var mixer = mixitup(allcards);
  },
methods: {
    getCatval() {
      var category = event.target.value;
      // I want to access mixer here;
    }
  }

Script

<select class="controls" @change="getCatval()">

Je ne trouve aucune solution ailleurs que ceci exemple où je pourrais appeler une méthode x à partir de monté () et lui passer le mixeur puis l'utiliser à l'intérieur de mon getCatval()

Y a-t-il un moyen plus simple d'accéder à ces variables?

vue.js

1 commentaires

Utilisez la fonction fléchée au lieu de la fonction normale xxx (args).

3 Réponses :

9
votes

Je vais d'abord vous suggérer d'arrêter d'utiliser var, et d'utiliser les dernières, let et const pour déclarer la variable

Vous devez d'abord déclarer une variable dans

mounted() {
     this.allcards = this.$refs.allcards;
    this.mixer = mixitup(this.allcards);
  },
methods: {
    getCatval() {
      let category = event.target.value;

     this.mixer
    }
  }

puis dans votre monté ()

data(){
 return {
   allcards: "",
   mixer: ""
 }
}

2 commentaires

n'y a-t-il pas d'autre moyen que de les renvoyer à partir de data ()

this. $ refs n'est pas réactif de toute façon, il n'est donc pas nécessaire de le mettre en cache dans le magasin de données sur le hook de cycle de vie monté. Faites simplement this.mixer = mixitup (this. $ Refs.allcards) est suffisant.

3
votes

comme le dit Ninth Autumn: l'objet renvoyé par la fonction data et les props de vos composants sont définis comme des attributs du composant, comme votre méthodes définies dans l'attribut method d'un composant, c'est dans this donc vous pouvez l'utiliser partout dans votre composant!

Voici un exemple:

  data() {
    return {
      yourVar: 'hello',
    };
  },
  mounted() { this.sayHello(); },
  method: {
    sayHello() { console.log(this.yourVar); },
  },

0 commentaires

0
votes

Upate

vous ne pouvez passer aucune valeur à l'extérieur si elle est dans la portée du bloc - Soit vous devez l'obtenir à partir d'un endroit commun, soit définir une valeur commune

Comme je peux le voir, var mixer = mixitup (allcards); agit finalement comme une fonction qui effectue une opération avec allcards passé à lui, puis renvoie une valeur.

1 - Placez-le dans un fichier helper différent si mixitup est totalement indépendant et n'utilise aucun vue accessoires utilisés par votre composant

Dans votre helper.js

 import YourVueMixins from '...mixins../YourVueMixins'

 const mixitup = Helpers.mixitup

 export default {
    name: 'YourVue',
    mixins: [YourVueMixins] // this will have that function as vue property
    data: ...,
    computed: ...,
    mounted() {
      const mixer = this.mixitup(allcards)
    },
    methods: {
       getCatval() {
          var category = event.target.value;
          this.mixitup(allcards)
        }
    }
  }

Et puis dans votre fichier vue , il suffit de l'importer et de l'utiliser comme une méthode .

Dans yourVue .vue

export default {
    methods: {
         mixitup(cards) {
          // Do some operation with cards
          let modifiedCards = 'Hey I get returned by your function'
          return modifiedCards
        }
    }
}

2- Utilisez-le comme mixins si votre mixitup dépend de votre vue et avoir accès aux propriétés de vue

Dans votre yourVueMixins.js :

XXX

Et importez dans votre fichier vue :

import Helpers from '...path../helpers'

 const mixitup = Helpers.mixitup

 export default {
    name: 'YourVue',
    data: ...,
    computed: ...,
    mounted() {
      const mixer = mixitup(allcards)
    },
    methods: {
       mixitup, // this will make it as `vue` method and accessible through 
         this
       getCatval() {
          var category = event.target.value;
          this.mixitup(allcards)
        }
    }
  }

4 commentaires

comment accéder au mélangeur dans getCatVal ()

Je peux essayer de vous aider davantage si vous pouviez expliquer ce que sera le mélangeur - si sa valeur est retournée par fn alors je vous ai donné l'exemple ci-dessus. En bref, vous ne pouvez passer aucune valeur en dehors si elle est dans la portée block - Soit vous devez l'obtenir à partir d'un endroit commun, soit définir une valeur commune

mélangeur initialise le plugin mixitup et peut ensuite être utilisé pour filtrer les cartes

Avez-vous essayé la deuxième manière que j'ai expliquée dans mon exemple ou la première? - Initialisez votre plugin mixitup dans un fichier différent et importez-le en tant que mixin - maintenant, lorsque le composant est monté, exécutez simplement la méthode et faites votre prochain travail