资讯专栏INFORMATION COLUMN

Vue常见问题及处理

oysun / 688人阅读

摘要:常见问题及处理要求每个只能有一个根元素。可以在最外层包一个来解决这个问题。分析原因中的,不是指向的实例解决方法将匿名函数变成箭头函数,个人总结学习文档,会持续更新,欢迎大家留言交流,如有帮助多谢点赞啦

常见问题及处理

1.vue.js 2.0要求每个template只能有一个根元素。可以在最外层包一个div来解决这个问题。

错误提示:

  vue.js:435 [Vue warn]: Error compiling template:
  

这是页头

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
   解决方案:在最外层包上一个div容器(不允许直接返回多个元素)

2.把局部组件当成全局组件去使用了

错误提示:

 vue.js:435 [Vue warn]: Unknown custom element:  - did
 you register the component correctly? For recursive components, make
 sure to provide the "name" option.
解决方案:正确的注册组件

3.在组件中去初始化数据 不允许给data直接赋值一个对象

错误提示:

   The "data" option should be a function that returns a per-instance
  value in component definitions.
解决方案: 
Vue.component("",{
       data:function(){
        return {}
       }
    })

4.push前面的那个变量,其实undefined

错误提示 :

Uncaught TypeError: Cannot read property "push" of undefined
解决方案:
this 通过箭头函数来解决问题

5.不支持ico图片格式

错误提示:

C:xampphtdocsframeworkvueproject	plssrcassetsimgfavicon.ico
Unexpected character "" (1:0) You may need an appropriate loader to
handle this file type. (Source code omitted for this binary file)
ERROR in ./src/assets/img/favicon.ico Module parse failed:
解决方案:
找到build/webpack.base.conf.js
在41行加上 |ico 
如:test: /.(png|jpe?g|gif|svg|ico)(?.*)?$/,

6.跨域问题

错误提示:

No "Access-Control-Allow-Origin" header is present on the
requested resource. Origin "http://localhost:8080" is therefore not
allowed access.
解决方案:
在通用引入的php文件中添加引入header,注意:引入的php要放在最上方
header("Access-Control-Allow-Origin:*");

7.Vue用ajax获取数据绑定在data上

在vue编写登录验证信息时,验证信息的显示数据由ajax返回,如何在html中显示data

问题代码:


{{uname_show}}

name_check:function(){
                var xhr=new XMLHttpRequest();
                var uname=this.uname;
                var url="http://localhost/admin/data/user/check_uname.php?uname="+this.uname;
                xhr.open("get",url,true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4&&xhr.status==200){
                        var uname_text=JSON.parse(xhr.responseText);
                        this.uname_show=uname_text.msg;
                        console.log(this.uname_show);
                    }
                }
                xhr.send(null);
            }

问题所在:可以打印,但不能在span中显示。
分析原因:this.uname_show=uname_text.msg;中的this,不是指向的vue实例
解决方法:将匿名函数变成箭头函数,xhr.onreadystatechange=()=>{}

(个人总结学习文档,会持续更新,欢迎大家留言交流,如有帮助多谢点赞啦~)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53671.html

相关文章

  • vue-cli3 搭建的前端项目基础模板

    摘要:基于搭建的前端模板,本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎或特性预编译语言,做了一定的封装,详见雪碧图移动的适配方案引入了及,可以自由地用去开发常用的工具类引用全局注入相关的文件,如通用的及等常用的的集合支持 基于 vue-cli3 搭建的前端模板,clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言...

    william 评论0 收藏0
  • mpvue开发小程序所遇问题h5转化方案

    摘要:腾讯地图提供的只提供了经纬度定位,而产品需要的是确认定位后获取城市,进行同城商品检索阿里云对象储存处理文件上传,比较意外的是腾讯对阿里云的域名前缀进行了封禁后台不能配置,解决方案是让后台将该域名进行服务器域名代理。 mpvue开发小程序所遇问题及h5转化方案 项目结构 |---build |---pages.js文件目录 |---src ...

    big_cat 评论0 收藏0
  • Vue项目部署遇到的问题解决方案

    摘要:模式部署没有什么问题,只要访问到服务器上的,就可以访问网站了。问题起因在做年度账单项目的时候,项目部署的时候,用的是模式。这样几项配置后,就可以在子目录下访问网站,刷新也没有问题。 写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式。 hash:也就是地址栏里的 # 符号。比如 http://www.example/#/hello,...

    姘搁『 评论0 收藏0

发表评论

0条评论

oysun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<