Vue.js Vuetify:v-dialog赢了'；t关闭，尽管v-model变量设置为false

我有几个对话框是用v-for创建的（

exchangetypeabbrevision

和

exchangeType

来自那里）。当我单击activator按钮时，对话框打开，用于存储对话框状态的对象中的值更新为“true”。 但当我单击“取消”或“保存”按钮时，对话框不会关闭，尽管对象的值更新为“false”

mdi plus
添加产品流
添加产品流
拯救
取消
导出默认值{
名称：“活动”，
数据：（）=>({
对话框：{}，
交换类型：{}，
unitProcessExchangesOptions:null，
}
}),
安装的（）{
我保证([
this.loadUnitProcessExchangeOptions（）
])
},
方法：{
异步loadUnitProcessExchangeOptions（）{
退回这个。$api
.options（“/unitprocessexchanges/”{
标题：{
授权：“令牌”+localStorage.getItem（“令牌”）
}
})
。然后（响应=>{
this.unitProcessExchangesOptions=response.data.actions.POST
对于（const exchangeType of this.unitProcessExchangesOptions
.exchange（类型选择）{
this.exchangeType[exchangeType.value]=exchangeType.display\u name
this.dialogs[exchangeType.value]=false
}
})
},
异步createUnitProcessExchange（ExchangeTyPeabRevision）{
this.newUnitProcessExchange.activity=this.activities[
这是我选择的活动
].url
this.newUnitProcessExchange.exchange\u type=exchangetypeabbrevision
this.dialogs[ExchangeTypeabbRevision]=false
//eslint禁用下一行无调试器
调试器
}
}
}

我认为第一个问题是，您试图使用数组表示法（即数组[0]）更改对象，但它应该是带有对象属性的点表示法，在您的情况下，它应该是dialogs.ExchangeTyPeabRevision=false

还有一个问题是，财产不存在，所以

data: () => ({
dialogs: {exchangeTypeAbbreviation:Boolean},
exchangeTypes: {},
unitProcessExchangesOptions: null,
 }
}),

---

现在，您可以设置ExchangeTyPeabRevision的值。

我能够找出它不起作用的原因。由于JavaScript的限制，Vue.js在观察对象和数组中的更改时有一些困难。这是有案可查的

在我的例子中，我通过直接赋值在“dialogs”变量中添加了嵌套变量，例如

this.dialogs[index] = false

但是，这会创建Vue.js无法跟踪的子元素。为了确保可以跟踪此元素上的更改，必须从一开始就对其进行预定义，或者需要使用

Vue.$set

命令对其进行设置。始终使用以下命令，为我解决了问题：

this.$set(dialogs, index, false)

---

嘿，我想这还不清楚，但是有很多的交换意见。这是一个包含多个项目的列表，这就是我使用数组表示法的原因。您可以看到加载unitProcessExchangeTypes的方法，

对话框中相应的子项被添加为“false”。正如本文中所述，“exchangeType”和“ExchangeTypeAppAbRevisions”来自上面代码段中未显示的“v-if”。此外，当打开对话框以及单击“关闭”按钮时，变量的状态实际上会发生更改。但是对话框没有关闭。