Как очистить динамические значения, переданные в vue-js-modal - PullRequest
Новая
       26

Как очистить динамические значения, переданные в vue-js-modal

0 голосов
/ 21 мая 2019

В моем проекте vueJs у меня есть таблица, в которой отображаются данные о некоторых продуктах из базы данных.Когда я щелкаю по продукту tr, он должен открыть модал, который отображает форму для ввода дополнительной информации о продукте, по которому щелкнули, вот так: 

<table class="table table-responsive table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Product Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="prod in products" :key="prod.id">
            <td>{{ prod.id }}</td>
            <td>{{ prod.name }}</td>
            <td><button class="btn btn-success btn-sm" @click.prevent="addStocks(prod)">Add Stock</button></td>
        </tr>
    </tbody>
</table>

Теперь в моем скрипте у меня есть метод, чтобы открыть модали передайте значение элемента, по которому щелкнули, модальному, как показано ниже: 

addStocks(prod){
  this.$modal.show('add-stocks')
  this.newStock.unitPrice = prod.sellin_price
  this.newStock.id = prod.id
  this.newStock.name = prod.name
},

и мой объект данных 

data() {
    return {

         newStock: {
            id: null,
            name: '',
            size: '',
            srln: '',
            colour: '',
            mfg: '',
            expiry: '',
            selling_price: ''
        },
    }
}

и модальный компонент 

<modal name="add-stocks"  height="auto" :draggable="true" :width="600">
    <div class="modal-header">
        <h4>Add new stock</h4>
    </div>
    <div class="modal-body form-horizontal">
    <div class="form-group">
        <label for="unitPrice" class="control-label col-md-2">Unit Price</label>
        <div class="col-md-4">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">&#8358;</span>
                <input class="form-control" v-model="newStock.unitPrice" readonly aria-describedby="basic-addon1">
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="form-group">
        //form fields here
    </div>  
    <div class="modal-footer modal_btns">
        <button class="btn btn-primary" @click.prevent="uploadStock">Save</button>
        <button class="btn btn-danger" @click.prevent="cancelUpload">Cancel</button>
    </div>
</modal>

Сейчаспроблема заключается в том, что когда я заполняю поля в модальном режиме и нажимаю кнопку отмены (без сохранения), я ожидаю, что поля будут очищены, поэтому при нажатии на другой продукт tr я получаю новую форму, но это неВ этом случае отображаются детали, заполненные в ранее закрытой модальной форме.В методах cancelUpload я очистил поля перед закрытием модального окна; 

cancelUpload(){
    this.$modal.hide('add-stocks')
    this.newStock.unitPrice = prod.sellin_price
    this.newStock.id = prod.id
    this.newStock.name = prod.name
}

Когда я нажимаю кнопку сохранения и после вызова API я вызываю этот метод, чтобы скрыть модальное, но та же проблемапроисходит как отображение деталей, когда в следующий раз я открываю другой модальный.Как мне это исправить?

1 Ответ

0 голосов
/ 21 мая 2019

Прежде всего проверьте, вызывается ли ваш метод каждый раз, когда модальное окно закрывается, т. Е. Либо нажимая кнопку отмены, крестик или клавишу esc.

Далее это может быть проблемой реактивности vue.Свойство объекта должно быть обновлено с использованием метода set в vue js, чтобы оно оставалось реактивным.

Поэтому попробуйте, как показано ниже. 

cancelUpload(){
    this.$modal.hide('clear-stocks')
    this.$set(this.newStock,unitPrice,'');
    this.$set(this.newStock,id,'');
    this.$set(this.newStock,name,'');
}

Другие свойства можно очистить также в приведенном выше методе.

Или же в методе addStocks вы также можете установить оставшиеся свойства пустыми.

Подробнее о Vue.set здесь .

...