Question

我刚开始使用Vue和Vuex，我想知道如何将整个表单保存到API。我找到了this，它似乎只是单个字段的一个很好的解决方案。这是否意味着我需要为表单中的每个字段使用getter和setter执行自定义计算属性？我理解数据绑定如何适用于本地存储（这似乎是大多数示例使用的），但每次击键更新后端服务似乎有点过分。

我想要做的是在用户执行操作时执行单个提交（例如单击保存按钮），我觉得为每个字段创建计算属性或方法不是正确的方法。

模板：

<div v-show="isEditing" class="edit-view">
  <form>
    <div class="form-group">
      <label>Title</label>
      <input :value="item.title" type="text" class="form-control" @input="update"  />
    </div>
    <div class="form-group">
      <label>Description</label>
      <input :value="item.description" type="text" class="form-control" @input="update" />
    </div>
  </form>
</div>

JS：

export default {
  name: 'todo',
  props: ['item'],
  data() {
    return {
      isEditing: false
    }
  },
  methods: {
    showEdit() {
      this.isEditing = true;
    },
    update() {
      // Commit a change to vuex store
    }
  }

Answer 1

将表单数据保留在表单组件的本地数据中。因此，在data()中定义所有表单属性。将v-model应用于所有输入元素和相应的数据属性。当用户单击“提交”时，使用表单数据进行一次提交。

这样，表单组件将包含已编辑的值，而vuex存储将包含提交的值。

使用vuex保存整个表单

1 个答案: