Child and $refs not a function

So a pretty basic setup

Child component in the parent

<actions :item="item" @save="actionData" ref="actionInput"></actions>

The method in the child

methods: {
            saveData() {                
                console.log("fired");
            }
 },

I'm calling the saveData() method from the parent like so.

saveItem() {
                this.$refs.actionInput.saveData();
 },

but I get this error. Uncaught TypeError: this.$refs.actionInput.saveData is not a function

Any ideas?

Thanks!

kevbrn

8 years ago

Best Answer

Level 14

Key part that I left out. The child component is created multiple times in a v-for so $refs needed to be indexed.

saveItem(index) {
    this.$refs.actionInput[index].saveData();
}

Inspect console and console.log() is your friend :)

2 likes

claudioasv

3 years ago

Level 1

@kevbrn para mi caso, me sirvió tu ayuda. muchas gracias.

Randy_Johnson

3 years ago

Level 8

I had a problem like this before but it was in reactjs. Would it be possible to make the actionInput object, and then you can just reference that specific object within an array.

actionInput = [{ name: Jermery, surname: Beadle }, { etc }]

buttonClick = (x) => {
	saveItem(x)
}

actionInput.map((x ,y) => {
	btn onClick={() => buttonClick(x)}
})

Please or to participate in this conversation.