web-dev-qa-db-ger.com

Vuex - Berechnete Eigenschaft "Name" wurde zugewiesen, hat jedoch keinen Setter

Ich habe eine Komponente mit einer Formularvalidierung. Es ist ein mehrstufiges Checkout-Formular. Der folgende Code ist für den ersten Schritt. Ich möchte bestätigen, dass der Benutzer einen Text eingegeben hat, seinen Namen im globalen Status speichern und dann zum nächsten Schritt senden. Ich benutze vee-validate und 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>

Ich habe ein Geschäft für die Bearbeitung des Auftragsstatus und die Aufzeichnung des Namens. Letztendlich möchte ich alle Informationen aus dem mehrstufigen Formular an den Server senden.

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

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

    }
  },

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

Wenn ich diesen Code starte, erhalte ich die Fehlermeldung, dass Computed property "name" was assigned to but it has no setter.

Wie binde ich den Wert aus dem Namensfeld an den globalen Status? Ich möchte, dass dies dauerhaft ist, sodass ein Benutzer, der einen Schritt zurückgeht (nachdem er auf "Nächster Schritt" geklickt hat), den von ihm eingegebenen Namen sehen wird

34
Connor Leech

Wenn Sie v-model ein berechnetes benötigen, benötigt es einen Setter . Was auch immer Sie mit dem aktualisierten Wert machen wollen (wahrscheinlich schreiben Sie es in den $store, wenn Sie davon ausgehen, dass es der Getter ist), den Sie im Setter machen.

Wenn das Zurückschreiben in den Store über das Senden von Formularen erfolgt, möchten Sie nicht v-model, sondern nur :value.

Wenn Sie einen Zwischenstatus haben möchten, in dem er irgendwo gespeichert wurde, die Quelle jedoch nicht bis zum Senden des Formulars in $store überschrieben wird, müssen Sie ein solches Datenelement erstellen.

85
Roy J

Für mich hat sich das geändert.

this.name = response.data;

Was berechnet wird, kehrt so zurück;

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