web-dev-qa-db-fra.com

Vuex - La propriété "nom" calculée a été attribuée mais elle n'a pas de paramètre

J'ai un composant avec une validation de formulaire. C'est un formulaire de paiement en plusieurs étapes. Le code ci-dessous est pour la première étape. Je voudrais valider que l'utilisateur a saisi du texte, stocker son nom dans l'état global, puis l'envoyer à l'étape suivante. J'utilise vee-validate et vuex

<template>
<div>
    <div class='field'>
        <label class='label' for='name'>Name</label>
        <div class="control has-icons-right">

            <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last">
            <span class="icon is-small is-right" v-if="errors.has('name')">
                <i class="fa fa-warning"></i>
            </span>
        </div>
        <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>

    </div>
    <div class="field pull-right">
        <button class="button is-medium is-primary" type="submit" @click.prevent="NeXTSTEP">Next Step</button>
    </div>
</div>
</template>

<script>
export default {
    methods: {
        NeXTSTEP(){
            var self = this;

            // from baianat/vee-validate
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.$store.dispatch('addContactInfoForOrder', self);
                    this.$store.dispatch('goToNextStep');
                    return;
                }
            });
        }
    },
    computed: {
        name: function(){
            return this.$store.state.name;
        }
    }
}
</script>

J'ai un magasin pour gérer l'état de la commande et enregistrer le nom. En fin de compte, je voudrais envoyer toutes les informations du formulaire multi-étape au serveur.

export default {
  state: {
    name: '',
  },

  mutations: {
    UPDATE_ORDER_CONTACT(state, payload){
      state.name = payload.name;

    }
  },

  actions: {
    addContactInfoForOrder({commit}, payload) {
      commit('UPDATE_ORDER_CONTACT', payload);
    }
  }
}

Quand je lance ce code, j'obtiens une erreur qui Computed property "name" was assigned to but it has no setter.

Comment lier la valeur du champ de nom à l'état global? Je voudrais que cela soit persistant de sorte que même si un utilisateur recule d'une étape (après avoir cliqué sur "Étape suivante"), il verra le nom qu'il a saisi à cette étape.

vue.jsvuejs2vue-componentvuex
34
Connor Leech

Si vous voulez calculer v-model, il faut un setter . Quoi que vous souhaitiez faire avec la valeur mise à jour (écrivez-la probablement dans le $store, en considérant que c'est ce que votre getter tire de celle-ci) que vous faites dans le setter.

Si vous le réécrivez dans le magasin via la soumission du formulaire, vous ne voulez pas v-model, vous voulez simplement définir :value.

Si vous voulez avoir un état intermédiaire, où il est enregistré quelque part mais n'écrase pas la source dans le $store jusqu'à la soumission du formulaire, vous devez créer un tel élément de données.

85
Roy J

Pour moi, ça changeait.

this.name = response.data;

A quoi calcule le retour alors;

this.$store.state.name = response.data;
0
Ibn Rushd

` 

computed: {
            isSubmitAttemped() {
                return Object.keys(this.fields).every(field => {
                    return this.fields[field] && this.fields[field].valid;
                });
            }
        }

<button class="btn btn-warning btn-block" v-bind:disabled="!isSubmitAttemped" >Login</button>

` 

0
Deepak Kr