Vue常见问题及处理-白红宇

Vue常见问题及处理

阅读量：6458 次

发布时间：2019-06-23

本文共 2313 字，大约阅读时间需要 7 分钟。

常见问题及处理

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:\xampp\htdocs\framework\vue\project\tpls\src\assets\img\favicon.icoUnexpected character '' (1:0) You may need an appropriate loader tohandle 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 therequested resource. Origin 'http://localhost:8080' is therefore notallowed 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=()=>{}