鍍金池/ 問答/HTML/ elementUI無法通過this.$refs動態(tài)改變樣式？

elementUI無法通過this.$refs動態(tài)改變樣式？

用了elementUI中的彈框，需求是點擊彈框內的按鈕后，內部彈框的寬度改變
本來想通過

//this.$refs.elDialog.style.width = '1500px'   //1
//this.$refs.elDialog.width = '1500px'      //2

第一句，width的值是能改變，也不報錯，但是實際樣式寬度沒有改變
第二句，直接報錯

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>

這是代碼

請問一下這種情況應該怎么解決？？

回答
編輯回答
做不到

謝謝上面兩位的回答。但是兩位的方法我都實踐過了，都是不行呢。
所以我直接加了這個方法暴力改變寬度了

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

因為用this.$refs.elDialog綁定的elementUI組件的話，
直接 this.$refs.elDialog.style.width = '1500px' 的權限是不夠高的，就是說雖然能改變，但是是無法展示。

如果用this.$refs.elDialog.width = '1500px'的話，由于我是用的區(qū)域是數據父組件（相對于elementUI的dialog組件來說，這里嵌套了很多層了），所以是無法直接改變子組件的數據的。

2017年9月17日 15:13
編輯回答
朽鹿
this.$nextTick(() => {
    this.$refs.elDialog.width = '1500px'
})

確保元素渲染再改寬度

另外我覺得框彈框并不是一個非常好的交互額。。。

2017年6月29日 04:07
編輯回答
痞性
你需要加
setTimeout(function(){
            _this.$refs.elDialog.width = '1500px'
              console.log('this.$refs.elDialog',this.$refs.elDialog);
},0)

或這可以:width='' 綁定Dialog 的width

2018年7月7日 13:37