vue 3 composition api method is undefined from emit

Question

I have this method updateLocation calling location

setup(props, context) { 
  const updateLocation = (location = null) =>{
    if(location) {
      center.value = location
      context.emit('mapChange', context.location())
    }
  }
  const location = () =>  { return {
    center:center,
  }
}

but I get context.location is not a function. (In 'context.location()', 'context.location' is undefined)

I also tried without context

and also calling the method works from other functions; just not from emit apparently

How did you injected the location function into the context? Can you show us the plugin? — Kapcash
– Kapcash, Commented Sep 7, 2021 at 7:26
I did not "inject" anything; not sure what you mean. this is the only code related to this — Sam
– Sam, Commented Sep 7, 2021 at 7:27

Nikola Pavicevic · Accepted Answer · 2021-09-07 07:52:43Z

1

You can try to rename location argument:

const updateLocation = (loc = null) =>{
if(loc) {
  center.value = loc
  context.emit('mapChange', location())
}

}

answered Sep 7, 2021 at 7:52

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2021-09-07 07:32:10Z

0

The context parameter has only 3 properties emit, attrs and slots, you could pass location by props like :

setup(props, context) { 
  const updateLocation = (location = null) =>{
    if(location) {
      center.value = location
      context.emit('mapChange', props.location())
    }
  }
}

answered Sep 7, 2021 at 7:32

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

1 Comment

Sam Over a year ago

I cannot access method from props ? I tried anyway; does not work

Kapcash · Accepted Answer · 2021-09-07 07:55:30Z

0

No need to use context if the function is within the same scope. Just give it a different name or it will shadow the variable location.

<script>
export default {
  setup(props, context) { 
    const getLocation = () => {
       return { center: center }
    }

    const updateLocation = (location = null) =>{
      if(location) {
        center.value = location
        context.emit('mapChange', getLocation())
      }
    }
  }
}
</script>

edited Sep 7, 2021 at 7:55

answered Sep 7, 2021 at 7:43

Kapcash

6,9902 gold badges22 silver badges47 bronze badges

3 Comments

Sam Over a year ago

I am not sure what you mean ? the method is in the same file; why would I need to create a new file and import it ?

Kapcash Over a year ago

Well it wasn't clear it was in the same file... Then you don't have to use context, just run the function because it's in the same scope... I updated my answer.

Kapcash Over a year ago

Do you have any error with the code like this?

Collectives™ on Stack Overflow

vue 3 composition api method is undefined from emit

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related