I cannot change form input data using Vuex

Question

vuex do not mutate vuex store state outside mutation handlers

I tried to look for something here, because the error is very common, but I couldn't solve it yet

I'm trying to create a stateful form with vuex

Component

<el-form ref="form" :model="form" label-width="130px">


   <el-form-item label="Entrada">
       <el-input v-model="form.dataEntrada"></el-input>
   </el-form-item>


</el-form>

Computed

computed: {
        form: {
            get () {
                return this.$store.state.form
            },
            set (value) {
                this.$store.commit('setForm', value)
            }
        }
    }

Store

state: {
    form: {
      dataEntrada: ''   
    },
    
},

mutations: {
    setForm(state, payload){
        state.form = payload
    }
}

actions: {},

getters: {},

Stark Buttowski · Accepted Answer · 2020-07-09 11:53:49Z

3

You are trying to map v-model to a piece of Vuex state. Instead use @input or @change in the input to commit the changes to the store and use :value to bind the value from the store.

<el-input :value="form.dataEntrada" @input="updateValue" />

and in the script

computed: { form: function() {  return this.$store.state.form }},

methods: { updateValue: function(e) { this.$store.commit('setValue', e.target.value) }}

Update

Template

<template>
<div class="hello">
<el-form ref="form" :model="form" label-width="130px">
  <el-row>
    <el-col :span="4">
      <el-form-item label="Entrada">
        <el-input v-model="form.dataEntrada"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Fornecedor">
        <el-input v-model="form.fornecedor"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Codigo">
        <el-input v-model="form.nfe.codigo"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Numero">
        <el-input v-model="form.nfe.numero"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Criar</el-button>
  </el-form-item>
</el-form>
</div>
</template>

Vue

data() {
   return {
     form: this.$store.state.form
   }
},
methods: {
  onSubmit() {
    this.$store.commit("setForm", this.form);
  }
}

store

In case if you are not setting the form elements to required and want to update only the changed fields, below is the code.

mutations: {
setForm(state, payload) {
  state.form = {
    ...state.form,
    ...payload
  };
}
},

edited Jul 9, 2020 at 11:53

answered Jul 9, 2020 at 9:02

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

marcelo.delta Over a year ago

thank you. Error: Cannot read property 'value' of undefined

marcelo.delta Over a year ago

Here - e.target.value

Stark Buttowski Over a year ago

console.log(e) to see whats in e. It has to be the event object

marcelo.delta Over a year ago

console.log(e) - The input value is shown. However it does not store the data in the form.dataEntrada

Stark Buttowski Over a year ago

You have change your mutation accordingly like setValue(state, payload){ state.form.dataEntrada = payload }

|

Collectives™ on Stack Overflow

I cannot change form input data using Vuex

1 Answer 1

Update

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related