web-dev-qa-db-ja.com

Vuex-計算されたプロパティ「name」が割り当てられましたが、セッターがありません

何らかのフォーム検証を備えたコンポーネントがあります。これは、複数ステップのチェックアウトフォームです。以下のコードは、最初のステップ用です。ユーザーがテキストを入力し、名前をグローバル状態で保存してから、次のステップに送信することを検証したいと思います。 vee-validate と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>

注文の状態を処理し、名前を記録するためのストアがあります。最終的には、すべての情報をマルチステップフォームからサーバーに送信したいと思います。

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

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

    }
  },

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

このコードを実行すると、Computed property "name" was assigned to but it has no setter.というエラーが表示されます

名前フィールドの値をグローバル状態にバインドするにはどうすればよいですか？ユーザーがステップに戻っても（[次のステップ]をクリックした後）このステップで入力した名前が表示されるように、これを永続的にしたい

vue.jsvuejs2vue-componentvuex
54
Connor Leech

v-modelを計算する場合は、 setter が必要です。更新された値で何をしたいか（おそらく、$storeに書き込みます。ゲッターがそれを取得することを考慮して）セッターで行います。

ストアへの書き戻しがフォーム送信を介して行われる場合、v-modelではなく、:valueを設定するだけです。

どこかに保存されているが、フォーム送信まで$storeのソースを上書きしない中間状態が必要な場合は、そのようなデータ項目を作成する必要があります。

110
Roy J

`

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