Vue常见问题及处理

常见问题及处理

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

错误提示：

  vue.js:435 [Vue warn]: Error compiling template:
  <h2>这是页头</h2>
  <button>登录</button>
  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: <my-footer> - 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.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

问题代码：

<input @blur="name_check()"
 v-model="uname" type="text" 
class="form-control" 
placeholder="管理员登录名" required />
<span>{{uname_show}}</span>

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

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