Как очистить от ценностей?

Question

Я использую Laravel-Vue-шаблон. В упаковке есть 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 или обнулить форму свойств. Как,

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

После завершения действия из вашего API, попробуйте очистить или обнулить данные , относящиеся к этой форме.

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