est-il possible de passer un paramètre dans les propriétés calculées dans Vue.Js. Je peux voir que lorsque les getters / setter utilisent le calcul, ils peuvent prendre un paramètre et l'affecter à une variable. comme ici 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 également possible:
// ...
computed: {
fullName: function (salut) {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
// ...
Où la propriété calculée prend un argument et renvoie la sortie souhaitée. Cependant quand j'essaye ceci, j'obtiens cette erreur:
vue.common.js: 2250 TypeError non capturé: fullName n'est pas une fonction (…)
Dois-je utiliser des méthodes pour de tels cas?
javascript
vue.js
vuejs2
Saurabh
la source
la source
Réponses:
Vous souhaitez probablement utiliser une méthode
Explication plus longue
Techniquement, vous pouvez utiliser une propriété calculée avec un paramètre comme celui-ci:
(Merci
Unirgy
pour le code de base pour cela.)La différence entre une propriété calculée et une méthode est que les propriétés calculées sont mises en cache et ne changent que lorsque leurs dépendances changent. Une méthode évaluera chaque fois qu'elle sera appelée .
Si vous avez besoin de paramètres, il n'y a généralement aucun avantage à utiliser une fonction de propriété calculée par rapport à une méthode dans un tel cas. Bien que cela vous permette d'avoir une fonction getter paramétrée liée à l'instance Vue, vous perdez la mise en cache donc pas vraiment de gain là-bas, en fait, vous pouvez casser la réactivité (AFAIU). Vous pouvez en savoir plus à ce sujet dans la documentation Vue https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
La seule situation utile est lorsque vous devez utiliser un getter et que vous devez le paramétrer. Cette situation se produit par exemple dans Vuex . dans Vuex, c'est le seul moyen d'obtenir de manière synchrone le résultat paramétré du magasin (les actions sont asynchrones). Ainsi, cette approche est répertoriée par la documentation officielle de Vuex pour ses getters https://vuex.vuejs.org/guide/getters.html#method-style-access
la source
<span v-text="fullName('Hi')"></span>
place, fonctionne également.<span :text="message"></span>
, ne fonctionne plus pour Vue 2.0, il faut utiliser à la place:<span v-text="message"></span>
ou<span>{{ message }}</span>
comme indiqué dans ce codepen: codepen.io/Ismael-VC/pen/dzGzJaVous pouvez utiliser des méthodes, mais je préfère toujours utiliser des propriétés calculées au lieu de méthodes, si elles ne modifient pas les données ou n'ont pas d'effets externes.
Vous pouvez passer des arguments aux propriétés calculées de cette façon (non documenté, mais suggéré par les responsables, ne vous souvenez pas où):
EDIT: Veuillez ne pas utiliser cette solution, elle ne fait que compliquer le code sans aucun avantage.
la source
Eh bien, techniquement parlant, nous pouvons passer un paramètre à une fonction calculée, de la même manière que nous pouvons passer un paramètre à une fonction getter dans vuex. Une telle fonction est une fonction qui renvoie une fonction.
Par exemple, dans les getters d'un magasin:
Ce getter peut être mappé aux fonctions calculées d'un composant:
Et nous pouvons utiliser cette fonction calculée dans notre modèle comme suit:
Nous pouvons appliquer la même approche pour créer une méthode calculée qui prend un paramètre.
Et utilisez-le dans notre modèle:
Cela étant dit, je ne dis pas ici 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 actualise son contenu automatiquement avec les nouvelles propriétés de cet élément (la liaison semble fonctionner très bien).
la source
Filtres sont une fonctionnalité fournie par les composants Vue qui vous permettent d'appliquer une mise en forme et des transformations à n'importe quelle partie des données dynamiques de votre modèle.
Ils ne modifient pas les données d'un composant ou quoi que ce soit, mais ils n'affectent que la sortie.
Supposons que vous imprimez un nom:
Remarquez la syntaxe pour appliquer un filtre, qui est | filterName. Si vous connaissez Unix, c'est l'opérateur de canal Unix, qui est utilisé pour passer la sortie d'une opération en entrée à la suivante.
La propriété filters du composant est un objet. Un seul filtre est une fonction qui accepte une valeur et renvoie une autre valeur.
La valeur renvoyée est celle qui est réellement imprimée dans le modèle Vue.js.
la source
Vous pouvez également passer des arguments aux getters en renvoyant une fonction. Ceci est particulièrement utile lorsque vous souhaitez interroger un tableau dans le magasin:
Notez que les accesseurs accessibles via des méthodes s'exécuteront chaque fois que vous les appelez, et le résultat n'est pas mis en cache.
On appelle la méthode de style d' accès et est inscrite sur la documentation Vue.js .
la source
Cependant, il y a des cas où vous devez le faire.Je vais vous montrer un exemple simple en passant une valeur à une propriété calculée en utilisant getter et setter.
Et le script
Lorsque le bouton a cliqué, nous passons à la propriété calculée le nom «Roland» et
set()
nous changeons le nom de «John Doe» en «Roland».Vous trouverez ci-dessous un cas d'utilisation courant lorsque le calcul est utilisé avec getter et setter. Disons que vous avez la boutique vuex suivante:
Et dans votre composant, vous voulez ajouter
v-model
à une entrée mais en utilisant le magasin vuex.la source
Je ne suis pas tout à fait sûr de ce que vous essayez de réaliser, mais il semble que vous serez parfaitement bien en utilisant la méthode au lieu du calcul!
la source
quand tu veux utiliser
la source
Calculé pourrait être considéré comme ayant une fonction. Donc, pour un exemple sur la valdiation, vous pouvez clairement faire quelque chose comme:
Que vous utiliserez comme:
Gardez à l'esprit que la mise en cache spécifique au calcul vous manquera toujours.
la source
Oui, il existe des méthodes pour utiliser les paramètres. Comme les réponses indiquées ci-dessus, dans votre exemple, il est préférable d'utiliser des méthodes car l'exécution est très légère.
Seulement pour 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 ceci:
Remarque: Lorsque vous utilisez cela, faites attention à la mémoire si vous avez affaire à des milliers
la source