Как очистить поля ввода из всплывающего окна после отправки - Vue - laravel? - PullRequest
Новая
       30

Как очистить поля ввода из всплывающего окна после отправки - Vue - laravel?

0 голосов
/ 04 июня 2019

Моя страница существует из таблицы, в которую я могу добавлять новые строки.Если вы хотите добавить новую строку, появится всплывающее окно, в котором можно добавить новые значения.Эти новые данные затем сохраняются в базе данных после отправки.Если я снова хочу добавить новую строку в поля ввода, они должны быть очищены.Метод, который я использую, работает, но не очень понятен.

Примечание. Мой код показывает только часть полей ввода, чтобы сделать его более понятным.Мое всплывающее окно на самом деле содержит 20 полей ввода.

Я хотел бы очистить их все сразу, вместо того, чтобы очистить их один за другим (как я делаю сейчас).Потому что я уже делаю это для определения v-модели, отправки новых данных в базу данных непосредственно на странице и с помощью постаксиального запроса.Есть ли более чистый способ сделать это?Спасибо за любой вклад, который вы могли бы дать мне.

Это мой код:

html part 

        <div class="col-2 md-2">
            <button class="btn btn-success btn-sx" @click="showModal('add')">Add New</button>
                <b-modal :ref="'add'" hide-footer title="Add new" size="lg">
                    <div class="row" >
                        <div class="col-4">
                            <b-form-group label="Category">
                                <b-form-input type="text" v-model="newCategory"></b-form-input>
                            </b-form-group>   
                        </div>
                        <div class="col-4">
                            <b-form-group label="Name">
                                <b-form-input type="text" v-model="newName" placeholder="cd4"></b-form-input>
                            </b-form-group>  
                        </div>
                        <div class="col-4">
                            <b-form-group label="Amount">
                                <b-form-input type="number" v-model="newAmount" ></b-form-input>
                            </b-form-group>   
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col-8">
                        </div>
                        <div class="col-4">
                            <div class="mt-2">
                                <b-button @click="hideModal('add')">Close</b-button>
                                <b-button @click="storeAntibody(antibodies.item)" variant="success">Save New Antibody</b-button>
                            </div>
                        </div>
                    </div>
                </b-modal>
        </div>

js part 

        <script>   
        import { async } from 'q';
            export default {
                props: ['speciedata'],
                data() {
                    return {
                        species: this.speciedata,
                        newCategory: '',
                        newName: '',
                        newAmount:'',
                    } 
                },
                computed: {

                },
                mounted () {
                },
                 methods: {
                    showModal: function() {
                        this.$refs["add"].show()
                    },
                    hideModal: function(id, expId) {
                        this.$refs['add'].hide()
                    },    
                    addRow: function(){
                        this.species.push({
                            category: this.newCategory,
                            name: this.newName,
                            amount: this.newAmount,
                        })
                    },
                storeSpecie: async function() {
                    axios.post('/specie/store', {
                        category: this.newCategory,
                        name: this.newName,
                        amount: this.newAmount,
                    })
                    .then(this.addRow())
                    // Clear input
                    .then(
                        this.newName = '',
                        this.newCategory = '',
                        this.newAmount = '',
                    )
                    .then(this.hideModal('add'))
                },
            }
        }

        </script>

Ответы [ 2 ]

1 голос
/ 04 июня 2019

в ваших данных приложения vuejs вы должны установить один объект для отображения модальных данных, например modalData, затем для сброса данных вы можете создать одну функцию и установить значение по умолчанию, проверив тип значения с помощью циклических ключей объекта modalData 

var app = new Vue({
  el: '#app',
  data: {
    message:"Hi there",
    modalData:{
       key1:"value1",
       key2:"value2",
       key3:"value3",
       key4:5,
       key5:true,
       key6:"val6"
    }
  },
   methods: {
     resetModalData: function(){
        let stringDefault="";
        let numberDefault=0;
        let booleanDefault=false;
      
        Object.keys(this.modalData).forEach(key => {  
        if(typeof(this.modalData[key])==="number"){
            this.modalData[key]=numberDefault;
          }else if(typeof(this.modalData[key])==="boolean")            {
           this.modalData[key]=booleanDefault;
          }else{
            // default type string
            this.modalData[key]=stringDefault;
          }
        
        });

     }
   }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
   {{modalData}}
   <br/>
   <button @click="resetModalData">Reset Modal Data</button>
</div>

обновление: в вашем случае: 

data:{

        species: this.speciedata,
        modalData:{
        newCategory: '',
        newName: '',
        newAmount:''
      } 
 },

и после сохранения данных: 

storeSpecie: async function() {
                    axios.post('/specie/store', {
                        category: this.newCategory,
                        name: this.newName,
                        amount: this.newAmount,
                    })
                    .then(()=>{
                    this.addRow();
                    this.resetModalData();
                    this.hideModal('add')
                    }

                },
0 голосов
/ 04 июня 2019

В нативном Javascript вы получаете метод reset().

Вот как это используется: 

document.getElementById("myForm").reset();

Это очистит каждый ввод в форме.

...