元素模态框对话框中的select组件被选中时没有任何响应
1.问题描述
准确的说，是对话框的el-from组件中的el-select组件。 当模态框打开时，select绑定的数据会被重新参数化为value1，select的视口状态也会变成value1，但是后面的option选项会发生变化。 ，选择视图图层*不再更新。
一般情况下，在创建或编辑数据时，会弹出一个对话框模式框，以弹窗的形式对数据进行编辑和更改。
<el-dialog :visible.sync="dialogEdit">
<el-form ref="editValidateForm" :model="editValidateForm">
...
<el-form-item prop="workType" label="类型：">
<el-select v-model="editValidateForm.workType"
placeholder="请选择类型"
@change="handleChange">
<el-option v-for="(item,index) in types"
:key="index"
:label="item.name"
:value="item.value">
{{item.name}}
</el-option>
</el-select>
</el-form-item>
</el-form>
</el-dialog>
editValidateForm 在 data 中会有一组初始数据：
export default {
name: "test",
data(){
return{
editValidateForm:{
...
workType:'',
}
}
},
methods:{
open(){},
handleChange(){}
}
}
2.问题情况1
如果只是用dialogEdit=true打开模态框，不重新参数化表单数据，就不会有问题。
如果有问题elementui模态框，可能是vue或者element版本的bug。 我用的是elemnt2.4.6，没有这个bug，这里就不解释这些情况了。
3.问题情况2
如果在打开对话框时对此数据设置正式参数：
this.editValidateForm.worktType = 1
会听说select的选中项变成1，但是以后就不能选择其他选项了。
其实只是视口没有更新而已。 select的change方法中，改变了this.editValidateForm.worktType的值。
这个问题好像是因为下拉框中的数据是通过回收其他socket得到的。 由于数据层太多，渲染函数不能手动更新，需要自动刷新
3.1 尝试1
由此，我想到了vue文档中所说的，当使用索引直接设置链表中原本不存在的一项时
this.items[索引] = newValue
视图不会更新。 为了解决这些情况，Vue 提供了一个 set 方法 vm.$set(target, propertyName/index, value)，它使用该参数来更新视图。 与这里的问题类似，我尝试使用设置参数：
this.$set(this.editValidateForm,'workType','1');
问题解决了，这个方法应该是强制刷新，对我的情况有效
3.2 尝试2
从强制刷新这一点出发，还有另外一种解决方案，vue API文档中也提供了vm.$forceUpdate()方法：
强制 Vue 实例重新渲染。 请注意，它仅影响实例本身和插入套接字内容的子组件，而不影响所有子组件。
我们参考旧的形式，但是在select的change函数中添加这个方法：
open(){
..
this.editValidateForm.worktType = 1
}
handleChange(){
this.$forceUpdate();
}
也解决了这个问题。
3.3 尝试3
编辑时，因为这条数据已经存在，所以点击数据请求数据信息，数据在成功反弹中正式参数化如下：
requestApi(params).then(function(res) {
this.editValidateForm = res.data;
})
在这些情况下，不存在此类错误。 因此，虽然目标只是重新参数化workType项，但也有必要给整个this.editValidateForm对象一个参数：
this.editValidateForm = {
...
workType："1"
}
问题解决了。 但这比较冗长，对于一个属性，需要重新参数化整个对象。
3.4 尝试4
尝试3也是在对话框中，但是给表单中的select组件绑定一个data子属性级别的data，也就是说将绑定的workType移到与editValidateForm同一级别也可以解决这个问题：
<el-form-item label="类型：">
<el-select v-model="workType"
placeholder="请选择类型">
<el-option v-for="(item,index) in types"
:key="index"
:label="item.name"
:value="item.value">
{{item.name}}
</el-option>
</el-select>
</el-form-item>
data(){
return{
workType:'',
editValidateForm:{
...
}
}
},
3.5 尝试5
因为这是修改别人的代码，我发现里面的方法确实可以解决我的问题elementui模态框，但是这里我的视图没有更新的真正原因是上一行代码，去掉之后，这个问题就不存在了：
methods:{
open(){
this.editValidateForm = {}; //问题所在
this.editValidateForm.worktType = 1
},
}
想了想，我觉得应该是这样的：首先将表单对象editValidateForm设置为空对象，那么这个对象之前的所有属性包括worktType都将不存在，然后使用“.”的形式。 形式参数。 这样，情况并不类似于尝试1中提到的情况，而是同样的问题：
数组更新检查
防范措施
由于 JavaScript 限制，Vue 无法检查以下更改列表：
当您直接通过索引设置项目时，例如： vm.items[indexOfItem] = newValue
对象修改检查注意事项
还是因为 JavaScript 的限制，Vue 无法检查对象属性的添加或删除：
对于已经创建的实例，Vue 无法动态添加根级响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
所以尝试3能解决的问题关键在于它是现有editValidateForm对象的形参
在Vue中，当你直接使用“.”时对不存在的属性或对象使用index参数，或者对链表中不存在的索引项直接使用index参数，从控制台复制可以看到数据变化，但视图无法显示。 更新
因此，即使表单不在对话框中，形参也不会更新视图。在这些情况下，可以尝试前面的方法
发表评论