場景：根據(jù)后端返回?cái)?shù)據(jù)列表，動(dòng)態(tài)生成多個(gè)顏色選擇器惊豺，并在用戶設(shè)置后燎孟，返回顏色選擇器設(shè)置的值。
1.最初思路
1）請(qǐng)求數(shù)據(jù)獲得列表尸昧；
2）v-for循環(huán)綁定顏色選擇器的value值揩页；
3）綁定change事件，獲取用戶設(shè)置的顏色值烹俗。
<ul>
<li v-for="(color, index) in colorList">
<el-color-picker :value="color" @change="changeHandle($event, index)"></el-color-picker>
</li>
</ul>
<script>
export default{
data(){
return{
colorList: ['#111','#222','#333']
}
},
method:{
changeHandle(color, index){
this.colorList[index] = color;
}
}
}
</script>
雖然獲取到了用戶改變的顏色列表爆侣，存在一個(gè)問題，顏色選擇器改變值后幢妄，在屏幕上點(diǎn)擊鼠標(biāo)兔仰，顏色選擇器顯示的顏色變成初始顏色，具體原因不明蕉鸳。
2.使用v-model
1）請(qǐng)求數(shù)據(jù)獲得列表乎赴；
2）生成一個(gè)對(duì)象，該對(duì)象的屬性用于顏色選擇器的雙向綁定變量潮尝；
3）綁定change事件榕吼，獲取用戶設(shè)置的顏色值。
<ul>
<li v-for="(color, index) in colorList">
<el-color-picker v-model="colorObj['val'+index]" @change="changeHandle($event, index)">
</el-color-picker>
</li>
</ul>
<script>
export default{
data(){
return{
colorList: ['#111','#222','#333']勉失，
colorObj: {}
}
},
method:{
changeHandle(color, index){
this.colorList[index] = color;
}
},
mounted(){
this.colorList.foreach((color,index)=> {
this.$set(this.colorObj, 'val'+index, color);
});
}
}
</script>
顏色選擇器使用v-model羹蚣，未出現(xiàn)設(shè)置完顏色后點(diǎn)擊空白處出現(xiàn)顏色取消問題。有沒有人遇到同樣問題乱凿，可以解釋一下顽素。
