ElementUI cannot dynamically change styles through this.$refs?

uses the pop-up box in elementUI. The requirement is that the width of the internal pop-up box changes after clicking the button in the pop-up box.
originally intended to pass 

//this.$refs.elDialog.style.width = "1500px"   //1
//this.$refs.elDialog.width = "1500px"      //2
In the first sentence of

, the value of width can be changed without reporting an error, but the actual width of the style does not change.
the second sentence directly reports an error

. 
runner-3.25.5.min.js:1 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop"s value. Prop being mutated: "width"

found in

---> <ElDialog>... (1 recursive calls)
       <Root>

this is the code

could you tell me how to solve this situation?

Javascript vue.js element
Mar.20,2021 

setTimeout(function(){
            _this.$refs.elDialog.width = '1500px'
              console.log('this.$refs.elDialog',this.$refs.elDialog);
},0)

or this can be: width='' binds Dialog's width 

this.$nextTick(() => {
    this.$refs.elDialog.width = '1500px'
})

make sure the element is rendered and then change the width

in addition, I don't think the frame pop-up box is a very good interaction.

Thank you for your answers. But I have practiced both of your methods, and both of them are not good enough.
so I directly added this method to violently change the width 

            changeWidth(){
                let element = document.querySelector("-sharpelDialog>.el-dialog")
                element.style.width = '1500px'
            },

because for elementUI components bound with this.$refs.elDialog, the permission of
directly this.$refs.elDialog.style.width = '1500px' is not high enough, that is, it can be changed, but cannot be displayed.

if you use this.$refs.elDialog.width = '1500px' , since the area I am using is the data parent component (there are many layers nested here compared to the dialog component of elementUI), it is impossible to change the data of the child component directly.

Previous: Java implements how to back up the table AA of database An on server a to database B on server b and change the name of the table to bb,. The database is mysql.

Next: How do vue child components replace parent component arrays

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu