iview 弹窗 关闭报错,Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
时间: 2023-11-15 08:57:56 浏览: 64
这个错误提示是因为在iview弹窗中直接修改了父组件传递过来的属性,而这个属性会在父组件重新渲染时被覆盖。正确的做法是在子组件中增加一个属性isShow用于控制对话框的显示和隐藏,这个错误提示是因为在iview弹窗中直接修改了父组件传递过来的属性,而这个属性会在父组件重新渲染时被覆盖。正确的做法是在子组件中增加一个属性isShow用于控制对话框的显示和隐藏,使用props属性给它赋值,利用watch监听属性变动更新状态,同时使用$emit触发事件传值;主组件绑定props属性和事件。具体实现可以参考上面提供的引用和中的代码。
相关问题
vue 使用前端框架 iview时,引入iview.css 报错
如果在使用 iview 时引入 iview.css 报错,可能是以下几个原因之一:
1. 路径错误:确认引入 iview.css 的路径是否正确,应该是在 index.html 或者入口文件中引入。比如,如果 iview.css 在 src/assets/css/iview.css 中,可以在 index.html 中引入:`<link rel="stylesheet" href="./assets/css/iview.css">`
2. 版本不匹配:确认 iview.css 的版本是否和 iview 的版本匹配,可以在 iview 的官网上查看对应版本的 iview.css 文件。
3. 缓存问题:尝试清除浏览器的缓存,重新打开页面查看是否还会报错。
如果以上方法都不能解决问题,可以尝试重新安装 iview 或者尝试使用 cdn 引入 iview.css。
iview弹窗打开后的回调函数
在iView中,弹窗组件的打开后的回调函数可以通过 `@on-visible-change` 属性来实现。具体实现方式如下:
1. 给弹窗组件添加 `@on-visible-change` 属性,指定回调函数名称,例如 `handleVisibleChange`:
```html
<Modal v-model="visible" @on-visible-change="handleVisibleChange"></Modal>
```
2. 在 Vue 实例中定义回调函数 `handleVisibleChange`,并在函数中添加需要执行的逻辑:
```javascript
export default {
data() {
return {
visible: false,
};
},
methods: {
handleVisibleChange(visible) {
if (visible) {
console.log('弹窗打开了!');
// 添加打开弹窗后需要执行的逻辑
} else {
console.log('弹窗关闭了!');
// 添加关闭弹窗后需要执行的逻辑
}
},
},
};
```
在上述代码中,当弹窗打开时,控制台会输出 `"弹窗打开了!"`,并执行 `handleVisibleChange` 函数中的逻辑;当弹窗关闭时,控制台会输出 `"弹窗关闭了!"`,并执行 `handleVisibleChange` 函数中的逻辑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)