The change event of el-select shows that the corresponding value of v-model has changed, but it hasn't changed on the web interface.

electron+elementui+vue.js environment:

<el-select v-model="monitorList[0].resolutionValue" placeholder="" @change="changeResolution">
  <el-option v-for="item in monitorList[0].modes" :key="item.width+"x"+item.height" :label="item.width+"x"+item.height" :value="item.width+"x"+item.height">
  </el-option>
</el-select>
    changeResolution() {
      console.log("changeResolution")
      console.log("this.monitorList[0].resolutionValue:",this.monitorList[0].resolutionValue)
      return true
    },

use the mouse to change the 1440x900 in the drop-down box el-select to 1920x1080, and the console.log here prints out this.monitorList [0] .accountionValue has become 1920x1080, but it is still displayed as 1440x900 on the interface.

May.11,2022

is said to change it by himself and write it as follows:
@ change= "$set (monitorList [0], resolutionValue, $event)"
but an error is reported that the resolutionValue attribute is not defined


tested that the normal value does not exist
https://jsfiddle.net/6ov4zumh/


vue object assignment if you want to respond. @ change= "$set (monitorList [0], 'resolutionValue', $event)" as mentioned on the first floor


monitorList [0] there is no predefined resolutionValue attribute

Menu