今天遇到一个问题，浪费了很长时间才解决，虽然问题解决了，但并没有理解真正的原理。
问题描述：
页面结构是由2层循环遍历出来，其中有el-select，v-model绑定的值是第一层循环出的子项的attention属性。为了给下拉框设置初始值，在created中，遍历数组，给每一个元素添加attention属性，并赋值为其子数组的第1项的title值。使用此方法设置后，当改变下拉框选项时，无法更改。
HTML结构：
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="demo-ruleForm"
>
<el-form-item label="时间" prop="surveyTime" class="surveyTime">
<el-date-picker
:picker-options="pickerOptions"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
v-model="ruleForm.surveyTime"
style
>
</el-date-picker>
</el-form-item>
<div
class="satisfaction_el_form_item"
style="overflow-y: scroll;
overflow-x: hidden;
width: 100%;height: 5rem;"
>
<div
class="satisfaction_el_form_item_children"
v-for="(item,parentIndex) in ruleForm.satisfactionData"
:key="item.objectId"
>
<p v-if="item.length !== 0">{{item.title}}
<span
v-for="(value,i) in totalScores"
v-if="i === parentIndex"
:key="i"
>{{value}}分</span>
</p>
<el-form-item
label="总体得分:"
:prop="'satisfactionData.'+ parentIndex +'.score'"
:rules="rules.totalScore"
>
<el-input type="text" v-model="item.score" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
v-for="(items,index) in item.subitemList"
:prop="'satisfactionData.'+ parentIndex +'.subitemList.' + index + '.score'"
:key="items.objectId"
:label="items.title +':'"
:rules="rules.score"
>
<el-input type="text" v-model="items.score" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
v-if="item.subitemList.length !== 0"
label="重点关注:"
:prop="'satisfactionData.' + parentIndex + '.attention'"
:rules="[{ required: true, message: '请选择重点关注对象', trigger: ['blur','change'] }]"
>
<el-select placeholder v-model="item.attention" @change="changeSel(item,parentIndex)">
<el-option
v-for="val in item.subitemList"
:key="val.objectId"
:label="val.title"
:value="val.title"
>
</el-option>
</el-select>
</el-form-item>
</div>
</div>
</el-form>
以下是从后台获取到的数据
let val = [ {
"title": "外观",
"subitemList": [
{
"title": "外观1",
"subitemList": []
},
{
"title": "外观2",
"subitemList": []
}
]
},
{
"title": "教育",
"subitemList": [
{
"title": "教育1",
"subitemList": []
},
{
"title": "教育2",
"subitemList": []
},
{
"title": "教育3",
"subitemList": []
},
{
"title": "教育4",
"subitemList": []
},
{
"title": "教育5",
"subitemList": []
}
]
},
{
"title": "服务",
"subitemList": []
},
}]
data数据：
data(){
return {
ruleForm: {
surveyTime: new Date(),
satisfactionData: [],
rules: {
surveyTime: [
{ required: true, message: "请输入调查时间", trigger: "blur" }
],
score: [{ validator: checkScore, required: true, trigger: "blur" }],
totalScore: [
{ validator: checkTotalScore, required: true, trigger: "blur" }
]
},
}
}
1、以上代码，可以实现下拉框的实现切换效果，但初始进入的时候，下拉框没有默认值，所以添加下面代码JS代码（1），给select框设置默认值
JS代码（1）如下：
//此处给this.ruleForm.satisfactionData数组的每一项添加attention属性，并赋值为数组每一项中子项数组subitemList第一项的title，即item.subitemList[0].title。
async created() {
this.ruleForm.ssatisfactionData = this.val;
this.ruleForm.satisfactionData.forEach(item => {
if(item.subitemList.length !== 0) {
item.attention = item.subitemList[0].title;
}
});
},
methods:{
changeSel(value,parentIndex){
for(let i in this.ruleForm.satisfactionData){
if(i == parentIndex){
this.ruleForm.satisfactionData[i].attention = value.attention;
this.$set(this.ruleForm.satisfactionData[i],"attention",value.attention)
}
}
}
}
虽然添加上面代码后，可以实现给select设置默认值，但当选择其他选择时，v-model所绑定的值不会更改，且试图不会改变，一直会显示默认值。尝试给select添加change事件也是不能生效。查了网上的资料，应该是因为v-model绑定值做修改后，视图没有刷新，是因为v-model所绑定的值，并没有在试图中所定义。所以对代码再次做了修改，如下：
//对data以及js代码进行修改
data(){
return {
value:[] //在data中新增value值
}
}，
created(){
this.ruleForm.ssatisfactionData = this.val;
this.ruleForm.satisfactionData.forEach(item => {
if(item.subitemList.length !== 0) {
item.attention = item.subitemList[0].title;
//在此处把每一个子项中subitemList的第一项title值push到value中
this.value.push(item.subitemList[0].title)
}
});
}，
methods:{
changeSel(value,parentIndex){
//此处就不需要了
// for(let i in this.ruleForm.satisfactionData){
// if(i == parentIndex){
// this.ruleForm.satisfactionData[i].attention = value.attention;
// this.$set(this.ruleForm.satisfactionData[i],"attention",value.attention)
// }
// }
}
}
//对HTML结构修改
<el-form-item
v-if="item.subitemList.length !== 0"
label="重点关注:"
:prop="'satisfactionData.' + parentIndex + '.attention'"
:rules="[{ required: true, message: '请选择重点关注对象', trigger: ['blur','change'] }]"
>
<!-- 给selectv-model绑定为value -->
<el-select placeholder v-model="value[parentIndex]" @change="changeSel(item,parentIndex)">
<el-option
v-for="val in item.subitemList"
:key="val.objectId"
:label="val.title"
:value="val.title"
>
</el-option>
</el-select>
</el-form-item>
更改之后，不但设置默认值成功了，而且还可以正常切换其他选项。
第一次写这个，文中如有错误及改进之处，欢迎在评论中指出谢谢。
网友评论