首页  >  问答  >  正文

vue.js - laravel使用vue-resource,报错Uncaught SyntaxError: Unexpected token

按照vue-resource官方文档,以及laravel官方文档都显示应该采用如下语法格式:

var demo = new Vue({
  el: '#app',
  data: {
    gridColumns: {'#':'id', '公司名':'name', '组织名':'email', '电话':'created_at'},
    gridData: []
  },
  methods: {
    this.$http.get('../db').then((response) => {
      this.gridData = response.data;
    },(response) => {
      console.log(response);
    });
  }
});

但是浏览器直接报错:(index):51 Uncaught SyntaxError: Unexpected token .

经过多方资料查找,以及调试,最终发现可以正常运行的语法如下:

var demo = new Vue({
  el: '#app',
  data() {
    return{
      gridColumns: {'#':'id', '公司名':'name', '组织名':'email', '电话':'created_at'},
      gridData: []
    }
  },
  mounted(){
    this.$http.get('../db').then((response) => {
      this.gridData = response.data;
    },(response) => {
      console.log(response)
    });
  }
});

我想问的是,具体是什么原因导致的,以后的语法规则应该遵循哪一种?

补充:

世界只因有你世界只因有你2736 天前1620

全部回复(2)我来回复

  • 黄舟

    黄舟2017-05-16 16:50:59

    单纯语法错误,你仔细看下第一个报错的代码

      methods: {
        // 這裡是對象呀,不能直接塞
        this.$http.get('../db').then((response) => {
          this.gridData = response.data;
        },(response) => {
          console.log(response);
        });
      }

    应该是

      methods: {
        fetchData() {
            this.$http.get('../db').then((response) => {
              this.gridData = response.data;
            },(response) => {
              console.log(response);
            });
        }
      },
      mounted() {
          this.fetchData()
      }

    回复
    0
  • 天蓬老师

    天蓬老师2017-05-16 16:50:59

    谢谢,Tomoe回复我的问题!
    data的写法也知道为什么了。根据vue文档说明,在组件中不能用属性方式定义data,必须使用对象方式定义。

    回复
    0
  • 取消回复