aurawindsurfing's avatar

SyntaxError: illegal character

Hi,

I'm new to vue but managed to buid a vue + blade + algolia search with pagination. Everything works fine but I'm puzzled with illegal character error when I try to add new method to the method section in my vue app. Please see below 2 examples:

no errors:

new Vue({
    el: '#app',
        data: {
            query: '',
            classifieds: [],
            currentPage: 0,
            lastPage: 0,
            current: 'current-page'
    },

    computed: {
        chunkedItems: function () {
            return _.chunk(this.classifieds,4)
        }
    },

    mounted: function () {
        this.client = algoliasearch('xxx', 'xxx');
        this.index = this.client.initIndex('xxx');
    },

    methods: {
        search: function() {
            this.index.search(this.query, {page: this.currentPage, hitsPerPage: 20},
                function(error, results) {
                    this.classifieds = results.hits;
                    this.lastPage = results.nbPages-1;
                    // console.log(this.classifieds.length);
                    console.log(this.currentPage);
            }.bind(this));
        },

        increaseCurrentPageNumber: function () {
          this.currentPage += 1;
          this.search();
        },

        decreaseCurrentPageNumber: function () {
            this.currentPage -= 1;
            this.search();
        }
    }
});

with an error:

new Vue({
    el: '#app',
        data: {
            query: '',
            classifieds: [],
            currentPage: 0,
            lastPage: 0,
            current: 'current-page'
    },

    computed: {
        chunkedItems: function () {
            return _.chunk(this.classifieds,4)
        }
    },

    mounted: function () {
        this.client = algoliasearch('xxx', 'xxx');
        this.index = this.client.initIndex('xxx');
    },

    methods: {
        search: function() {
            this.index.search(this.query, {page: this.currentPage, hitsPerPage: 20},
                function(error, results) {
                    this.classifieds = results.hits;
                    this.lastPage = results.nbPages-1;
                    // console.log(this.classifieds.length);
                    console.log(this.currentPage);
            }.bind(this));
        },

        increaseCurrentPageNumber: function () {
          this.currentPage += 1;
          this.search();
        },

        decreaseCurrentPageNumber: function () {
            this.currentPage -= 1;
            this.search();
        }
        
    }
});

anyone have any idea what it is please?

0 likes
3 replies
aurawindsurfing's avatar

I'm sorry for not pointing out the diff. The only difference is the ENTER after the last method that brakes it... regardless if I paste new method or just ass ENTER it stops to work.

aurawindsurfing's avatar

Anyone? artisan view:clear does not help. Now actually when I add any enter anywhere the code throws and error.

For instance adding one line with ENTER

       },

        
        increaseCurrentPageNumber: function () {
          this.currentPage += 1;
          this.search();
        },

        decreaseCurrentPageNumber: function () {
            this.currentPage -= 1;
            this.search();
        }
    },
});

generates such a strange output:

    methods: {
        search: function() {
            this.index.search(this.query, {page: this.currentPage, hitsPerPage: 20},
                function(error, results) {
                    this.classifieds = results.hits;
                    this.lastPage = results.nbPages-1;
                    // console.log(this.classifieds.length);
                    console.log(this.currentPage);
            }.bind(this));
        },

        increaseCurrentPageNumber: function () {
          this.currentPage += 1;
          this.search();
        },

        decreaseCurrentPageNumber: function () {
            this.currentPage -= 1;
            this.search();
        }
    },
});���������

Any ideas please?

aurawindsurfing's avatar
Level 50

Just to close this question. I did not find the reason for such behavior. I tried different encoding of the files, pasting it via notepad, nothing worked.

I then committed what I had and tried it on another machine and it worked like a charm. So the conclusion was there is something wrong with my setup.

After complete reinstall of local dev environment (docker) and rebuild of all of the containers, things just started to work like expected.

Please or to participate in this conversation.