vue开发中遇到的问题总结

//工作中遇到的：

（1）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: "flag"

原因：子组件直接更改父组件中的属性

解决办法：无法直接更改可以用$emit()传递参数至父组件中，然后在绑定在子组件中的父组件方法里更改父组件属性
例：

//父组件
<map-china :flag="isShow" @on-change-flag="changeFlag"/>
//export default --> methods
changeFlag(val){
this.isShow = val;
}
//子组件
this.$emit('on-change-flag', val)

//学习中遇到的：

（1）echarts中map地图全屏展示出现图型大小不变的问题

原因：echarts设置的是这样，但是当全屏的时候，是滞后的，导致全屏之后的容器大小还是之前的大小，需要重置大小

解决办法：

只需要在echarts后面加一段代码就可以解决了，使echarts充满容器
myChart2.setOption({...});
    //页面改变时更新echarts容器使其自适应
 setTimeout(function (){
     window.onresize = function () {
          myChart2.resize();
          }
        },200)
或者添加这个

myChart2.setOption({...});
 window.addEventListener("resize",function(){
    myChart2.resize();
   })

到此这篇关于vue开发中遇到的问题总结的文章就介绍到这了,更多相关vue开发中遇到的问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue开发中遇到的跨域问题及解决方法

    Vue开发中遇到的跨域问题及解决方法

    跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 1.jsonp 原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入. 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • Vue开发环境跨域访问问题

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target:'http://192.168.1.99:8080/', changeOrigin:true, pathRewrite:{ '^/api':'' } }

  • 详解Vue 开发模式下跨域问题

    设置请求头部 后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com 前端post请求设置withCredentials=true 这里用了axios的请求数据方法代码如下: import axios from 'axios' import config from '../config' export default { request (method, uri, data,

  • 解决vue-cli项目开发运行时内存暴涨卡死电脑问题

    最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动.而且因为是突然卡死,没来得及打开任务管理器. 最开始以为是硬盘的问题,但是在卡死几次后,就想到把任务管理器开着玩项目,看看到底是不是哪个程序把硬盘或者CPU占满了导致的卡死.经过一番排查,发现是node.js进程的内存一直在暴涨,内存直接100%,然后系统将所有休眠进程换到虚拟内存,但是还是不够,就一直换直到崩盘,硬盘也被占满100%. 这时候我才知道是运行项目开发环境导致的.然后想到

  • 详解vue-cli开发环境跨域问题解决方案

    前后端分离开发中必要会遇到的问题-跨域.在使用vue开发的时候,开始为了解决跨域问题.采用的是CORS(Cross-origin resource sharing).后台在响应头中添加Access-Control-Allow-Origin.这样就可以跨域调后台接口了. 在前几天无意中看到了config的index.js文件中有一个proxyTable属性,通过配置可以解决开发环境的跨域 开发期间的API代理 当将此样板与现有后端集成时,通常需要在使用dev服务器时访问后端API.为了实现这一点,

  • 详解vue开发中调用微信jssdk的问题

    起因 微信分享网址时无法分享图片,这个问题需要用jssdk去解决.其实开始的时候时可以看到图片的,但后来微信禁止了.所以只能使用jssdk去解决. 普通网页开发很简单,但是使用vue或其他前端框架开发spa单页面webapp的时候就会有问题了.只要url发生变化就会报签名错误.其实微信官方上已经写了说明. 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支

  • 基于vue 开发中出现警告问题去除方法

    基于vue 开发中出现警告问题去除方法

    出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 以上这篇基于vue 开发中出现警告问题去除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 使用vue.js开发时一些注意事项 Vue开发过程中遇到的疑惑知识点总结

  • 解决Vue开发中对话框被遮罩层挡住的问题

    在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,无论是Element-UI dialog还是bootstrap的Modal,如下图所示: 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值,比较简单易行的办法如下:对于bootstrap Modal需要添加css语句 .modal-backdrop {  z-index: -1;} 而对于Element UI该组件已经在属性层面提供了解决办法,只要添加:modal-append-t

  • vue开发中遇到的问题总结

    //工作中遇到的: (1)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: "flag" 原因:子组件直接更改父组件中的属性 解决办法:无法直接更

  • Vue开发中常见的套路和技巧总结

    属性排放 export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 } 管理请求加载状态 async beforeMount(){ // 开始加载 this.loading = true

  • 分享12个Vue开发中的性能优化小技巧(实用!)

    分享12个Vue开发中的性能优化小技巧(实用!)

    目录 前言 1.长列表性能优化 1.不做响应式 2.虚拟滚动 2.v-for遍历避免同时使用v-if 3.列表使用唯一key 4.使用v-show复用DOM 5.无状态的组件用函数式组件 6.子组件分割 7.变量本地化 8.第三方插件按需引入 9.路由懒加载 10.keep-alive缓存页面 11.事件的销毁 12.图片懒加载 总结 前言 性能优化,是每一个开发者都会遇到的问题,特别是现在越来越重视体验,以及竞争越来越激烈的环境下,对于我们开发者来说,只完成迭代,把功能做好是远远不够的,最重要

  • Vue开发中出现Loading Chunk Failed的问题解决

    目录 报错现象 发生原因 解决思路 触发bug 一点思考 报错现象 某天测试反应在点击页签的时候出现了 Loading Chunk Failed 的错误,经过本人百度分析后判断是异步组件在发包时旧资源被替换的问题,然后一通CV操作之后发现问题还是存在,于是便有如下探究. 发生原因 用户在发包前进入了页面(也就是请求到了 index.html ),并且在 index.html 中可以得知将来要请求的异步组件的名字叫 a.js ,当服务器这时候发包,并且清空掉了 a.js 这个资源,改名叫 a1.j

  • vue开发中后台系统复杂表单优化技巧

    目录 引言 表单校验 使用computed进行表单校验优化 表单拆分 表单兄弟组件的数据通信问题 引言 在中后台系统的日常开发中,表单必不可少,当表单内容比较多,例如有上百个字段(这一点都不夸张,血淋淋的现实)时,代码往往也变得复杂且难以维护,加上各种动态联动的表单校验,无疑让我们的页面开发过程雪上加霜,本文将结合自己平时的开发习惯,分享一下在大表单开发中如何处理复杂的表单校验,以及如何对表单进行拆分,减少单个文件堆积过多的代码内容. 表单校验 <template> <el-form r

  • vue开发中数据更新但视图不刷新的解决方法

    目录 **解决方法1:静默刷新(使用v-if的特性) 解决方法2:Vue.$set(官方推荐) 解决方法3: Vue.$forceUpdate(手动强制更新视图) 解决方法4:Object.assign(使用修改栈能触发视图更新的特性) 解决方法5:对于数组还可以使用splice方法 总结 我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,V

  • Vue开发中整合axios的文件整理

    前言 大家在vue日常开发中,不可避免要整合axios,这里简单记录一下整合中的文件,方便以后使用查找.下面来看看详细的介绍. 整合方法 整合文件axios.js import axios from 'axios'; // 适配vue-resource const instance = axios.create(); instance.interceptors.request.use(config=> { //Serialize.decode(config); return config; })

随机推荐