Vuejs element-ui表单不更新模型答案

【问题标题】：Vuejs element-ui form not updating modelVuejs element-ui表单不更新模型
【发布时间】：2020-06-24 04:53:58
【问题描述】：

当我输入任何值时，我的模型没有更新，当我发送到我的商店时，它告诉我对象“项目”未定义。有人可以帮我吗？我觉得语法是正确的。这是我正在使用的实际 SFC

<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>

我制作了一个可用的 Jsfiddle： https://jsfiddle.net/zheactj9/1/

【问题讨论】：

实际上是 $store 未定义。您是否正确注册了您的商店（Vuex）？你能提供它的代码吗？
抱歉没有包含商店代码。但是，如果您删除商店代码，您仍然会注意到当您在表单中输入值时 item 对象并没有改变。
它确实改变了，看看：jsfiddle.net/0jfk6es2
你说得对，它似乎确实发生了变化。我认为这个问题与我的 vuex 代码有关。
我刚刚发现了问题。我从调度程序发送了多个不允许的参数：stackoverflow.com/questions/50958909/…

标签： vue.js element-ui

【解决方案1】：

我刚刚创建了一个带有Vuex store 的示例，它使用动作和突变以及提供新记录的getter 和计算属性进行更新。示例：

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/element-ui@2.0.3/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>

还有 jsfiddle https://jsfiddle.net/gwL275hk/2/

我希望这会有所帮助。如果您需要，我可以更详细地解释，请问。

【讨论】：

【解决方案2】：

我创建了一个如何使用 Vuex here 的示例。

看看，我用的代码和你的差不多。

发送多个参数作为有效负载：

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

商店操作示例：

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

要重置您的表单，您只需执行以下操作：

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

【讨论】：