Question

我使用的是laravel-vue-boilerplate。包装中有User CRUD。我做了同样的事情，复制/粘贴，更改几个细节以拥有Item CRUD。工作正常。问题是行动后（edit），我想添加一个新项目，该表单已经充满了已编辑的项目值。表单位于modal中，它是一个组件。不知道我粘贴在代码的哪一部分，期待！

模式：

 addItem(): void {//this is  the actions to call the modal
    this.isModalAdd = true;
    this.setModalVisible(true);
    this.form=this.new_form;

  }
  edit(item:Item):void{
        this.isModalAdd = false;

        this.setModalVisible(true);
        this.form = { ...item };
   }
<ItemsModal v-bind:form='form' v-bind:is-add='isModalAdd' v-bind:is-visible='isModalVisible' ></ItemsModal>//added in the Items template

    <script lang="ts">//Items Modal
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
import { Action, State, namespace } from 'vuex-class';

import checkPassword from '@/utils/checkPassword';

const iStore = namespace('items');

@Component
export default class ItemsModal extends Vue {
  @Prop() form;
  @Prop() isAdd;
  @Prop() isVisible;
  @iStore.Action addItem;
  @iStore.Action editItem;
  @iStore.Action setModalVisible;
  @iStore.State isModalLoading;

 handleOk() {

    if (this.isAdd) {
      this.addItem(this.form);
    } else {
      this.editItem(this.form);
    }
  }

  handleClose() {
    this.setModalVisible(false);
  }
}
</script>


<template lang="pug">
b-modal(
  hide-header-close=true,
  :visible='isVisible',
  :cancel-title='$t("buttons.cancel")',
  :ok-disabled='isModalLoading',
  :ok-title='isModalLoading ? $t("buttons.sending") : isAdd ? $t("buttons.add") : $t("buttons.update")',
  :title='isAdd ? $t("users.add_user") : $t("users.edit_user")',
  @hide='handleClose',
  @ok.prevent='handleOk',
)
  b-form
    b-form-group(
      :label='$t("strings.name")'
      label-for='name',
    )
      b-form-input#name(
        type='text',
        v-model='form.name',
        maxlength='191',
        required,
      )
</template>

Answer 1

您的代码对我来说似乎不完整。据我的猜测，提交表单后，您应该清空表单数据。表示，在 addItem（this.form） ， this.editItem（this.form） 的末尾， setModalVisible（false） 这些方法，您应该清空 this.form 数据或将 form < / em>的属性。喜欢，

this.form = {} or this.form.name = null

通过api完成操作后，尝试清空或清空与该表格相关的数据。

editItem (form) { // work with your backend this.form = {} }

如何清除值？

1 个答案: