Vue常见问题及处理

oysun 发布于2019-08-02 14:14 / 738人阅读

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

常见问题及处理

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=()=>{}

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

云服务器 GPU云服务器数据处理及分析数据分析及处理专业大数据处理及分析数据处理及分析方法

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

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

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

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

william 2019-08-26 12:24 评论0 收藏0
mpvue开发小程序所遇问题及h5转化方案

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

big_cat 2019-08-22 18:06 评论0 收藏0
Vue项目部署遇到的问题及解决方案

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

姘搁『 2019-08-23 14:38 评论0 收藏0