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.

Goran · Accepted Answer · 2018-03-30 13:04:13Z

0

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:

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

answered Mar 30, 2018 at 13:04

Goran

3,4202 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UncountedBrute Over a year ago

Firstly, thank you for your reply I will try this implementation late tonight. Secondly, please do not fire information about misunderstanding of JavaScript, especially arrays and objects. I am aware of arrays and objects, the difficulty is application of the Vue framework.

Goran Over a year ago

Just trying to help - this syntax error should be obvious to even junior developers. No hard feelings and have a nice day :)

UncountedBrute · Accepted Answer · 2018-03-30 15:40:06Z

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

Collectives™ on Stack Overflow

export default issue with VueJS ES5

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related