export default issue with VueJS ES5

Question

I am developing a website, partially in Vue using ES5.

I need to get data from a Vue Child component to be sent back up to the parent, the way explained to me was via using export default {} However I am constantly recieving syntax errors and I am not sure why because from what i see, I am following Mozillas recomendations.

My question component:

    var question = Vue.component('question', {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean
    },
    data: function () {
        return ({
            choice: 0,
            counter: 0,
            finished: false
        });
    },
    export default {
        methods: {
            onClickButton: function (event) {
                this.$emit('clicked', 'someValue')
            },
            postResponse: function () {
                var formData = new FormData();
                formData.append(this.choice);
                // POST /someUrl
                this.$http.post('Study/PostScenarioChoice', formData).then(response => {
                    // success callback
                }, response => {
                    // error callback
                });
            },
            activatePost: function () {
                if (this.counter < this.scenarios.length) {
                    this.counter++;
                }
                else {
                    this.finished = true;
                }
            }
        }
    },
    template:
    `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div >
});

I get the error in the browser console Expected ':' which is on the line export default {

Any assistance will be greatly appreciated.

Answer 1

The actual answer was a simple misunderstanding of the information presented here. The use of export default was irrelevant in my implementation however this was not easily visible until I started noticing the emit posting the parent element later on.

The actual implementation was as follows:

    var question = Vue.component('question', {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean,
        counter: Number
    },
    data: function () {
        return ({
            choice: 0,
            finished: false
        });
    },
    methods: {
        onClickButton: function (event) {
            this.$emit('clicked', 'someValue');
        },
        postResponse: function () {
            var formData = new FormData();
            formData.append(this.choice);
            // POST /someUrl
            this.$http.post('Study/PostScenarioChoice', formData).then(response => {
                // success callback
            }, response => {
                // error callback
            });
        }
    },
    template:
        `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div >`
});

The receiving method in the parent element is as follows:

onClickChild: function (value) {
        console.log(value) // someValue
        this.showTimer = true;
        this.countdownTimer();
        if (this.counter < this.scenarios.length) {
            this.counter++;
        }
        else {
            this.finished = true;
        }
    }

Answer 2

You have written completely wrong syntax of JavaScript. What you are trying to do here is to put "export default" in the place where object key should go. I will provide correct code here, but I strongly suggest you go and learn the fundamentals of JavaScript including arrays and objects in order to be able to read and write correct and valid JavaScript. Here is some good learning material for beginners:

• http://eloquentjavascript.net/
• https://maximdenisov.gitbooks.io/you-don-t-know-js/content/

And here is the fixed Vue component:

export default Vue.component("question", {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean
    },
    data: function () {
        return ({
            choice: 0,
            counter: 0,
            finished: false
        });
    },
    methods: {
        onClickButton: function (event) {
            this.$emit("clicked", "someValue");
        },
        postResponse: function () {
            var formData = new FormData();
            formData.append(this.choice);
            // POST /someUrl
            this.$http.post("Study/PostScenarioChoice", formData).then(response => {
                // success callback
            }, response => {
                // error callback
            });
        },
        activatePost: function () {
            if (this.counter < this.scenarios.length) {
                this.counter++;
            }
            else {
                this.finished = true;
            }
        }
    },
    template:
        `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div>`
});