Vue.js 如何清除传递到vue js模式的动态值

在我的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>

和我的数据对象

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>

当我点击save按钮并在api调用之后，我调用此方法来隐藏模式，但当我下次打开另一个模式时，会出现与细节显示相同的问题。

---

如何解决此问题？

首先，检查是否在每次关闭模式时调用您的方法，即单击“取消”按钮、交叉符号或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的详细信息。

谢谢。现在我发现以下错误：“无法在未定义、null或基元值上设置被动属性：”和“无法使用”中的“运算符在（动态值）中搜索“”，为什么要在cancelUpload中再次保存值？

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

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