Question

在我的vueJs项目中，我有一个表，该表显示数据库中的一些产品数据。当我单击产品tr时，它应该打开一个模式，该模式显示一个表单，以输入有关所单击产品的更多详细信息，如下所示：

React Native Tools

现在，在我的脚本中，我有一种方法可以打开模式，并将单击的项目的值传递给模式，就像这样；

Microsoft

和我的数据对象

<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
},

现在，问题是当我填写模态中的字段并单击“取消”按钮（不保存）时，我希望这些字段将被清除，因此当我单击另一个产品tr时，会得到一个新的表单，但是情况并非如此，详细信息将填充到先前关闭的模式表单中。在cancelUpload方法中，我在关闭模式之前已经清除了字段；

data() {
    return {

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

当我单击“保存”按钮并进行api调用后，我调用此方法来隐藏模式，但是在下一次打开另一个模式时，与详细信息显示一样，也会发生同样的问题。我该如何解决？

Answer 1

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

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

1 个答案: