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

Я использую шаблон 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>

Можете ли вы показать код модального компонента и метода действия?

Muhaimenul Islam 04.01.2019 20:15

Добавлен код @MuhaimenulIslam.

Szűcs Szabolcs 06.01.2019 11:53
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
2
36
1

Ответы 1

Мне ваш код кажется неполным. По моему мнению, после отправки формы вы должны очистить данные формы. Означает, что в конце addItem (this.form), this.editItem (this.form), setModalVisible (ложь) этих методов вы должны очистить данные эта форма или аннулировать свойства форма. Нравится,

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

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

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

Другие вопросы по теме