如何清除传入vue-js-modal的动态值

Question

在我的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调用之后，我调用这个方法来隐藏模式，但是当我下一次打开另一个模式时，同样的问题发生在细节显示上。我该如何解决这个问题？

Answer 1

首先，检查是否在每次关闭模式时都调用您的方法，即单击cancel按钮、十字符号或esc键。

接下来，这可能是vue反应性的问题。应使用vue js中的set方法更新对象属性，以使其保持响应性。

因此，尝试如下所示。

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

您还可以在上面的方法中清除其他属性。

或者，在addStocks方法中，您还可以将其余属性设置为空。

有关Vue.set here的更多信息。