vue.js - laravel menggunakan vue-resource dan melaporkan ralat Ralat Sintaks Tidak Dijangkit: Token tidak dijangka

Question

Menurut dokumen rasmi vue-resource dan dokumen rasmi laravel, format sintaks berikut harus digunakan:

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);
    });
  }
});

Tetapi penyemak imbas secara langsung melaporkan ralat: (indeks):51 Ralat Sintaks Tidak Ditangkap: Token tidak dijangka .

Setelah mencari pelbagai maklumat dan penyahpepijatan, akhirnya kami mendapati sintaks yang boleh berjalan secara normal adalah seperti berikut:

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)
    });
  }
});

Apa yang saya ingin tanya ialah, apakah sebab khusus yang manakah peraturan tatabahasa yang perlu dipatuhi pada masa hadapan?

Supplement:

Answer 1

Ralat sintaks mudah, sila lihat dengan teliti pada kod ralat pertama

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

sepatutnya

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

Answer 2

Terima kasih, Tomoe kerana membalas soalan saya!
Saya juga tahu kenapa cara data ditulis. Menurut dokumentasi Vue, data tidak boleh ditakrifkan dalam komponen menggunakan atribut, tetapi mesti ditakrifkan menggunakan objek.