Puis-je passer des paramètres dans les propriétés calculées en Vue.Js

est-ce possible de passer des paramètres dans les propriétés calculées en Vue.Js. Je peux voir quand avoir des getters/setter à l'aide calculée, ils peuvent prendre un paramètre et l'affecter à une variable. comme ici, à partir de la documentation:

//...
computed: {
  fullName: {
    //getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    //setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
//...

Est-ce possible aussi:

//...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
//...

Où propriété calculée prend un argument et renvoie la sortie souhaitée. Cependant lorsque j'essaie ceci, j'obtiens cette erreur:

vue.commun.js:2250 Uncaught TypeError: fullName n'est pas une fonction(...)

Devrais-je être à l'aide de méthodes pour de tels cas?

Non, vous ne pouvez pas passer des paramètres aux propriétés calculées. Oui, en utilisant des méthodes est la meilleure façon de le faire.

InformationsquelleAutor Saurabh | 2016-11-10

160

La plupart probablement vous souhaitez utiliser une méthode
```
<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}
```
Une longue explication

Techniquement, vous pouvez utiliser une propriété calculée avec un paramètre comme ceci:
```
computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}
```
(Merci Unirgy pour le code de base pour cela.)

La différence entre une propriété calculée et une méthode, c'est que les propriétés calculées sont mis en cache et changer seulement lorsque leurs dépendances changement. Un méthode permettra d'évaluer à chaque fois qu'il est appelé.

Si vous avez besoin de paramètres, il n'existe généralement pas d'avantages de l'utilisation d'une propriété calculée fonction sur une méthode dans un tel cas. Si il vous permet d'avoir paramétrées fonction get lié à la Vue de l'instance, vous perdez la mise en cache donc pas vraiment de tout gain il y a, en fait, vous risquez de casser la réactivité (AFAIU). Vous pouvez en lire plus à ce sujet en Vue de la documentation https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

La seule utile lorsque vous ont pour utiliser un getter et le besoin de l'avoir paramétrée. Cette situation se produit par exemple dans Vuex. en Vuex c'est la seule façon de façon synchrone obtenir paramétrées résultat de la boutique (les actions sont asynchrones). Ainsi, cette approche est inscrit sur la liste officielle Vuex documentation pour ses getters
https://vuex.vuejs.org/guide/getters.html#method-style-access
- À l'aide de <span v-text="fullName('Hi')"></span> au lieu de cela, fonctionne également.
- Je ne sais pas pourquoi il a été édité...
- Le problème est que les <span :text="message"></span>, ne travaille plus pour Vue 2.0, on doit utiliser à la place: <span v-text="message"></span> ou <span>{{ message }}</span> comme indiqué dans ce codepen: codepen.io/Ismael-VC/stylo/dzGzJa
- Vous avez raison. Je n'ai pas remarqué ce qui a été modifié dans la version 2.0. Merci pour la correction!
- Je ne comprends pas POURQUOI les propriétés calculées ne fonctionne pas, est semble être Calculée n'autorise pas les params¿??¿?¿?¿
- Les propriétés calculées utilisation ES5 getter syntaxe qui ne supporte pas l'appeler avec tous les paramètres (il n'y a pas de parenthèses). C'est donc une langue de niveau de prescription et c'est la façon dont elle est incorporée dans Vue.js.
- Le deuxième exemple est mauvais. C'est juste une propriété calculée retour d'un rappel. Rien ne sera mis en cache, ni il n'y aura aucun avantage de la propriété calculée. Il est tout simplement le code plus difficile à lire.
- Désolé @PedroMoreira mais je dois vous demander: avez-vous lu ma réponse? J'explique à la fois la mise en cache et l'utilité de cette approche (basée sur vuex). Ai-je raté quelque chose auquel vous voulez ajouter à votre commentaire mais je n'arrive pas à comprendre ça?
- Vous avez déclaré qu'il n'y a pas d'avantages de l'utilisation d'une méthode par rapport à une calculées dans ce cas, mais je suis défendre qu'il n'y a pas d'avantage à utiliser un calculées dans ce cas, il suffit de retourner un rappel. Le calcul est juste envelopper ce qui ne devrait pas être une méthode. Le résultat sera traitée qu'une seule fois, en retournant le (référence à l') de rappel et de ne jamais recommencer. Le rappel sera traitée à chaque fois une dépendance des changements, tout comme une méthode. Donc le calcul est de ne rien faire. JSFiddle Journal
- Désolé pour une réponse très tardive @PedroMoreira, je viens de trouver un certain temps pour analyser cela. En effet vous avez raison, ce que j'ai écrit n'était pas claire et mixed-up 🙂 j'ai corrigé la réponse et fait de mon mieux pour la reformuler pour le rendre plus clair et précis. Vous pouvez laissez-moi savoir si il est clair maintenant. Merci.
InformationsquelleAutor damienix
22

Vous pouvez utiliser les méthodes, mais je préfère encore utiliser les propriétés calculées au lieu de méthodes, si elles ne sont pas la mutation de données ou n'ont pas d'effets externes.

Vous pouvez passer des arguments pour les propriétés calculées de cette façon (ce n'est pas documenté, mais suggéré par les responsables, ne sais plus où):
```
computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}
```
EDIT: Merci de ne pas utiliser cette solution, il ne fait que compliquer le code sans les avantages.
- Il sera vraiment utile si vous pouvez fournir une référence. Cela devrait fonctionner.
- désolé c'était une solution pour un pas vraiment descriptive question sur github, et je ne le trouve pas pour le moment...
- Cela fonctionne pour moi, mais la seule chose que je ne suis pas un fan de est le fait qu'il renvoie une fonction plutôt que la propriété réelle, de sorte que le VueJS devtools ne pas afficher les résultats de n'importe où. Je ne sais pas si c'est typique pour les propriétés calculées, mais il rend le dépannage d'un peu plus de mal.
- Comment gérer la mise en cache? Ça va fonctionner correctement lorsque le paramètre change?
- Je ne crois pas qu'il serait cache quelque chose à l'intérieur de la fonction retour. La différence de méthodes seraient purement de convention (méthodes ont pour effet, calculées sont uniquement à des fins de récupération)
- Si c'est une approche intelligente, je vous conseille d'aller juste avec une méthode dans ce cas.
- Il ne met pas en cache. Il n'y a aucun avantage à l'utilisation d'une propriété calculée comme ceci. Vous devez utiliser une méthode. Si vous avez besoin d'une méthode pour être réactive déclenchée alors vous devriez l'utiliser en conjonction avec un observateur.
InformationsquelleAutor Unirgy
7

Bien, techniquement parlant, on peut passer un paramètre à une fonction calculée, de la même manière, nous pouvons passer d'un paramètre à une fonction get en vuex. Une telle fonction est une fonction qui retourne une fonction.

Par exemple, dans les accesseurs d'un magasin:
```
{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}
```
Ce getter peut être mappé sur le calcul des fonctions d'un composant:
```
computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}
```
Et nous pouvons utiliser cette fonction calculée dans notre modèle comme suit:
```
<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>
```
Nous pouvons appliquer la même approche pour créer un calculées méthode qui prend un paramètre.
```
computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ]),
  descriptionById: function() {
    return (id) => this.itemById(id).description;
  }
}
```
Et l'utiliser dans notre modèle:
```
<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>
```
Ceci étant dit, je ne suis pas en train de dire que c'est la bonne façon de faire les choses avec Vue.

Cependant, j'ai pu observer que lorsque l'élément avec l'ID spécifié est muté dans le magasin, la vue ne doit actualiser son contenu automatiquement avec les nouvelles propriétés de cet élément (la liaison semble fonctionner très bien).
- woah donc cela a fonctionné pour moi , ne pas utiliser vuex . voudrais aussi savoir si c'est une manière légitime de faire propriétés calculées.
- Bien que cela fonctionne, il traite essentiellement la propriété calculée de la même méthode. c'est à dire qu'il perd la mise en cache des avantages d'une propriété calculée. Donc, il n'y a pas de gain réel à l'aide de cette méthode. "Notez que les accesseurs accessibles via des méthodes d'exécuter à chaque fois que vous les appelez, et le résultat n'est pas mis en cache." Voir vuex.vuejs.org/en/getters.html
- mais je suis sûr que les méthodes ne sont pas être réexécuté, lorsque les données sous-jacentes est changé. C'est tout ce que je suis vraiment à la recherche pour.
- alors vous devriez être à l'aide d'un observateur. vuejs.org/v2/guide/computed.html#Watchers
- Je préfère utiliser une propriété calculée qu'un observateur, si possible. Je ne faisait que prendre la question avec votre déclaration: "Donc, il n'y a pas de gain réel à l'aide de cette méthode." tant que il ya une différence significative, même sans mise en cache.
- il y a une différence significative, même sans mise en cache" - comment?
- la propriété calculée obtient recalculées lorsque les données sous-jacentes changent, la méthode ne fonctionne pas. Ce qui signifie que vous devez déclencher l'appel de méthode sur un watcher si vous voulez la même fonctionnalité.
- Oui, cela est vrai de la norme concept de propriétés calculées, mais lorsqu'il est utilisé de cette façon, il sera toujours recalculer car il ne sait rien sur les données sous-jacentes. Au moins avec un watcher vous pouvez comparer les anciennes et les nouvelles valeurs et exécuter uniquement la méthode si elle répond à certaines exigences. Je crois aussi que c'est plus explicite quant à ce que l'intention est lors de l'utilisation d'un observateur & méthode à cette fin vs une propriété calculée qui n'est pas du tout en offrant les avantages d'une angiographie de la prop. Mais c'est l'expérience que vous voulez fournir à vos collègues développeurs.
InformationsquelleAutor Stéphane Appercel

Vous pouvez passer des paramètres mais soit il n'est pas un vue.js manière ou la façon dont vous êtes en train de faire est mal.

Cependant, il ya des cas où vous avez besoin de le faire.Je vais vous montrer un exemple simple passage de la valeur à la propriété calculée à l'aide de méthodes getter et setter.

<template>
    <div>
        Your name is {{get_name}} <!-- John Doe at the beginning -->
        <button @click="name = 'Roland'">Change it</button>
    </div>
</template>

Et le script

export default {
    data: () => ({
        name: 'John Doe'
    }),
    computed:{
        get_name: {
            get () {
                return this.name
            },
            set (new_name) {
                this.name = new_name
            }
        },
    }    
}

Lorsque le bouton cliqué, nous sommes de passage à la propriété le nom de "Roland" et dans set() nous changeons le nom de 'John Doe' à 'Roland'.

Ci-dessous il y a une utilisation lorsque calculée est utilisée avec les méthodes getter et setter.
Disons que vous avez le suivre vuex magasin:

export default new Vuex.Store({
  state: {
    name: 'John Doe'
  },
  getters: {
    get_name: state => state.name
  },
  mutations: {
    set_name: (state, payload) => state.name = payload
  },
})

Et dans votre composant que vous souhaitez ajouter v-model pour une entrée, mais à l'aide de la vuex magasin.

<template>
    <div>
        <input type="text" v-model="get_name">
        {{get_name}}
    </div>
</template>
<script>
export default {
    computed:{
        get_name: {
            get () {
                return this.$store.getters.get_name
            },
            set (new_name) {
                this.$store.commit('set_name', new_name)
            }
        },
    }    
}
</script>

InformationsquelleAutor roli roli

0

Oui méthodes sont là pour l'utilisation de paramètres. Des réponses est indiqué ci-dessus, dans votre exemple, il est préférable d'utiliser des méthodes car l'exécution est très léger.

Seulement pour la référence, dans une situation où la méthode est complexe et le coût est élevé, vous pouvez mettre en cache les résultats comme suit:
```
data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}
```
remarque: Lors de l'utilisation de ce, watchout pour mémoire, si traiter avec des milliers

InformationsquelleAutor Isometriq
0

Vous pouvez également passer des arguments à getters par le retour d'une fonction. Ceci est particulièrement utile lorsque vous voulez effectuer une recherche dans un tableau dans le magasin:
```
getters: {
  //...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) //-> { id: 2, text: '...', done: false }
```
Noter que les getters accessibles via des méthodes d'exécuter à chaque fois que vous les appelez, et le résultat n'est pas mis en cache.

Qui est appelée Méthode de Style de l'Accès et est documenté sur le Vue.js docs.

InformationsquelleAutor vnbrs

computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

lorsque vous souhaitez utiliser

<p>{{fullName('your salut')}}</p>

InformationsquelleAutor Khalid Hasan

0

Filtres sont une fonctionnalité fournie par la Vue des composants qui vous permettent d'appliquer la mise en forme et des transformations à une partie de votre modèle de dynamique de données.

Ils ne changent pas d'un composant de données ou de quoi que ce soit, mais ils ne touchent la sortie.

Dire que vous êtes l'impression d'un nom:

JS:
```
new Vue({
  el: '#container',
  data() {
    return {
      name: 'Maria',
      lastname: 'Silva'
    }
  },
  filters: {
    prepend: (name, lastname, prefix) => {
      return `${prefix} ${name} ${lastname}`
    }
  }
});
```
HTML:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
  <p>{{ name, lastname | prepend('Hello') }}!</p>
</div>
```
Avis de la syntaxe à appliquer un filtre, qui est | filterName. Si vous êtes familier avec Unix, c'est de l'Unix pipe de l'opérateur, qui est utilisé pour transmettre le résultat d'une opération en tant que contribution à la suivante.

La propriété filters de l'élément est un objet.
Un seul filtre est une fonction qui accepte une valeur et renvoie à une autre valeur.

La valeur retournée est l'un qui est en fait imprimé dans le Vue.js de modèle.

InformationsquelleAutor Diego Pereira
-1

Je ne suis pas entièrement sûr de ce que vous essayez d'atteindre mais on dirait que vous serez parfaitement bien à l'aide de la méthode de la place de la!

InformationsquelleAutor M U

Vous devez vous connecter pour publier un commentaire.

Une longue explication