How to declare variable without returning it in vue?

Question

I'm trying to send a function to a parent component through an event, but when i try to declare the variable that will store the function inside 'data(){return: }' the function gets executed as soon as the variable receives it. I need to find a place to declare the variable without executing the function inside it automatically.

//child
export default: {
    data() {
        return {
            submit_method: { type: Function }
        }
    },
    methods: {
        open(type) {
            if(type == 'newFolder') {
                this.$refs.newFolder.show()
                this.submit_method = this.exportFile()
            } else {
                this.$refs.olderOmbudsman.show()
            }
        },
        exportFile() {
            if ( this.doc.origin.id != null ) {
                window.open(`${window.globals.API_SERVER}/ombudsman/doc/?page=${this.doc.page}&origin=${this.doc.origin.id}`, '_target')
            }else{
                alert("Choose the origin!");
            }
        }
    },
    activated() {
        this.$emit('export-ombudsman', submit_method)
    }
}

Why you want to pass a function to the parent component?

Ramon Schmidt
– Ramon Schmidt

2019-07-04 18:50:03 +00:00
Commented Jul 4, 2019 at 18:50 — Ramon Schmidt
– Ramon Schmidt, Commented Jul 4, 2019 at 18:50

skirtle · Accepted Answer · 2019-07-04 17:55:01Z

1

The first oddity I notice is this:

return {
    submit_method: { type: Function }
}

Props support types, data does not. All you're doing here is assigning the object {type: Function} to submit_method.

Then there's this:

this.submit_method = this.exportFile()

This is invoking the method immediately. I assume you meant this:

this.submit_method = this.exportFile

Then we've got this:

this.$emit('export-ombudsman', submit_method)

In templates you need to drop the this. for accessing members but you can't do it in your JavaScript. This needs to be:

this.$emit('export-ombudsman', this.submit_method)

All of which assumes that submit_method is dynamic. If it isn't then you can just pass exportFile directly:

this.$emit('export-ombudsman', this.exportFile)

Even if you do need the function to be dynamic there isn't any need for submit_method to be declared in your data unless you need it to be reactive. You can still save it to this even if it isn't in data.

edited Jul 4, 2019 at 17:55

answered Jul 4, 2019 at 17:48

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

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

2 Comments

Bruno Souza Over a year ago

Thank you! I didnt know putting '()' after the method invoked it immediatly, that's what was happening. Also i do need the function to be reactive but i didnt know data doesnt take types. Should i just declare it as an empty property then?

skirtle Over a year ago

@BrunoSouza Difficult for me to say what the initial value of submit_method should be without knowing how it will be used but submit_method: null would be sufficient if there isn't a more suitable value.

Collectives™ on Stack Overflow

How to declare variable without returning it in vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related