Dev Faq
0
votes

VUEX: Changement d'état ne mettant pas à jour le champ de saisie

**** MISE À JOUR STROND> ****

Solution: STRUT> Ne vous inquiétez pas de nouer l'état VUEX sur le formulaire. J'ai réalisé que cela ne vaut pas la peine, et je peux toujours sérialiser les données de formulaire et l'envoyer de toute façon en utilisant les conventions standard. Avait une repense totale de ne pas avoir besoin de crier autant d'éléments dans des objets JS. P>

**** orig / for forte> **** p>

D'accord, peut-être S'il vous plaît dites-moi ce qui me manque ici. p>

Je veux mettre à jour l'état dans une fonction de mutation et que les modifications reflètent dans les champs de saisie. Crazy Droite? Je suppose qu'il y a des problèmes avec la mise à jour des propriétés d'objet, donc dans l'exemple que j'ai à la fois référencé la propriété d'objet et définir un getter spécifique pour la propriété, aucun desquels ils fonctionnent forts>. Ensuite, pour représenter la mise à jour de l'état en dehors du champ de saisie, j'ai juste un bouton ci-dessous cela. P>

Modèle: strong> p> 

updateUserName (state, name) {
    Vue.set(state.user, "first_name", name);
}

3 commentaires

Pourquoi pas MAPACTION UPDATE_USER_NAME et l'appelez comme this.update_user_name (nom) ?

Y a-t-il une raison V-Modèle ne peut pas être Utilisé dans le composant et les valeurs de l'état sont uniquement mises à jour sur une méthode d'action? Le pourrait toujours être initialisé avec une valeur du magasin.

Ouais, je joue avec le modèle V et l'utilisation de get () () Pour gérer les mises à jour, malheureusement avec le même résultat. En fait, l'exemple que j'ai des mises à jour via une action, voir qu'il est passé dans @input

3 Réponses :

1
votes

Vous devez regarder les variables d'état. Lors de la modification de la valeur, la fonction de surveillance déclenchera. XXX

J'espère que cela vous aidera, et d'avoir une idée de la façon dont la montre et le travail calculé.

1 commentaires

Il n'y a pas besoin d'une montre dans ce scénario car il n'y a rien d'intéressant qui ne se produit pas, il suffit d'assigner une variable superflaire à la variable calculée. V-Modèle et Getters Leverage VUEX et VUE beaucoup mieux imo

2
votes

Note: strong> J'ai testé cela localement mais je ne sais pas exactement comment l'état du magasin examine la question.

Le code> peut être deux- Way liaison avec V-Model code>, au lieu de calculé code> ou montre code> éd. Il peut être initialisé avec une valeur du magasin (j'ai utilisé le crochet de cycle de vie code> monté code> ci-dessous). L'état du magasin est mis à jour uniquement sur le bouton Code> Cliquez sur. P> 

const state = {
  user: {
    firstName: ''
  }
}

const getters = {
  getFirstName: state => state.user.firstName
}

0 commentaires
0
votes

C'est une question ancienne, mais j'ai couru dans le même problème hier et la solution consistait à utiliser le modificateur .prop sur l'attribut de valeur d'entrée, comme:

Une citation d'une place assez aléatoire dans le Docs dit:

Pour certaines propriétés telles que la valeur pour fonctionner comme vous l'attendez, vous devrez les lier à l'aide du modificateur .prop.

J'espère que cela aide quelqu'un!

1 commentaires

Ceci est la documentation en question Vuejs.org/v2/ Guide / Composants.html # Utilisation-V-Modèle-ON-Componen TS - Il décrit quelque chose de différent de ce que vous avez indiqué et ne fait référence qu'aux composants personnalisés.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO