Vuejs element-ui form not updating model

Question

My model is not updating when I enter in any values and when I dispatch to my store, it tells me the object "item" is undefined. Can someone help me out here? I feel like the syntax is correct. This is the actual SFC i am using

<template>
    <el-form :model="item" ref="item" label-width="120px">
        <el-form-item label="Name" required>
            <el-input v-model="item.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Description">
            <el-input v-model="item.description"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click='submitForm'>Submit</el-button>
            <el-button @click='clearForm'>Clear</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: 'itemForm',
        data () {
            return {
                item: {
                    name: '',
                    description:''
                }
            }
        },
        methods: {
            submitForm() {
                this.$store.dispatch('addItem', this.item)
            },
            clearForm() {
                console.log("CLEAR")
                this.$refs['item'].resetFields()
            }

        },
        watch: {
            item: function() {
                console.log(this.item)
            }
        }
    }

</script>

I have made a usable Jsfiddle: https://jsfiddle.net/zheactj9/1/

It is actually $store that is undefined. Did you register your store (Vuex) properly? Can you please provide the code for it? — Jakub A Suplicki
– Jakub A Suplicki, Commented Jun 24, 2020 at 5:41
Sorry did not include store code. However, if you remove store code, you would still notice that the item object does not change when you enter values into the form. — bg9848
– bg9848, Commented Jun 24, 2020 at 5:45
It does change on my end, have a look: jsfiddle.net/0jfk6es2 — Jakub A Suplicki
– Jakub A Suplicki, Commented Jun 24, 2020 at 5:47
You are right it does seem to change. I think the issue is related to my vuex code. — bg9848
– bg9848, Commented Jun 24, 2020 at 6:07
I just found the issue. I was sending multiple parameters from my dispatcher which is not allowed: stackoverflow.com/questions/50958909/… — bg9848
– bg9848, Commented Jun 24, 2020 at 6:08

Nikolay Yankov · Accepted Answer · 2020-06-24 06:12:18Z

I just created an example with Vuex store which updates with action and mutation and a getter and computed property which provide the new record. Example:

ELEMENT.locale(ELEMENT.lang.ja)

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    item: {
      name: '',
      description:''
    }
  },
  mutations: {
    ADD_ITEM(state, payload) {
      // mutate state
      state.item = payload
    }
  },
  actions: {
    addItem ({ commit },payload) {
      commit('ADD_ITEM', payload)
    }
  },
  getters: {
    itemData: state => {
      return state.item
    }
  }
})

var Main = {
    data () {
      return {
          item: {
              name: '',
              description:''
          }
      }
    },
    store,
    methods: {
        submitForm() {
            this.$store.dispatch('addItem', this.item)
        },
        clearForm() {
            console.log("CLEAR")
            this.$refs['item'].resetFields()
        }

    },
    computed: {
     getItemData() {
        return this.$store.getters.itemData
     }
    },
    watch: {
        item: function() {
            console.log(this.item)
        }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<html>
<head>
  
</head>
<body>
  <div id="app">
    <el-form :model="item" ref="item" label-width="120px">
          <el-form-item label="Name" required>
              <el-input v-model="item.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="Description">
              <el-input v-model="item.description"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click='submitForm'>Submit</el-button>
              <el-button @click='clearForm'>Clear</el-button>
          </el-form-item>
      </el-form>

  <div class="store-item">
  Store Item Data -> Name: {{ getItemData.name }} and Descruiption: {{ getItemData.description }}
  </div>
  </div>
  
  <script src="//unpkg.com/vue/dist/vue.js"></script>
  <script src="//unpkg.com/[email protected]/lib/index.js"></script>
  <script src="//unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  </body>
</html>

And the jsfiddle https://jsfiddle.net/gwL275hk/2/

I hope this helps. I can explain in more details if you need, just ask.

Jakub A Suplicki · Accepted Answer · 2020-06-24 06:22:53Z

1

I created an example of how you would use Vuex here.

Have a look, I used pretty much the same code as yours.

Sending multiple parameters as payload:

submitForm() {
  this.$store.dispatch("addItem", {
    item1: this.item,
    item2: this.item,
    item3: this.item
  });
}

Example of a store action:

actions: {
  addItem: function(store, payload) {
    console.log(payload);
  }
}

To reset your form you could simply do:

clearForm() {
   this.item.name = ''
   this.item.description = ''
}

edited Jun 24, 2020 at 6:22

answered Jun 24, 2020 at 5:56

Jakub A Suplicki

4,8211 gold badge27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vuejs element-ui form not updating model

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related