Can't use $refs using variable name instead of direct value

Question

I'm trying to call a child component's method from my parent component using $refs. It works if I do it the regular way: this.$refs.actualNameOfTheChildComponent.someMethod()

But for my app's needs I have to use a variable name instead of the child component's actual name:

const previousAction = `action${i-1}`
this.$refs.previousAction.showConflict()

In the second line, Vue doesn't understand that I'm not referring to a child component named previousAction, but I'm referring to a child component whose name is the value of the variable previousAction.

What's the right way to do it?

Fredrik · Accepted Answer · 2019-12-30 14:08:21Z

1

Writing .something is just syntactic sugar for ["something"]. Therefore you can use:

const previousAction = `action${i-1}`
this.$refs[previousAction].showConflict()

You can read more about the differences between dot notation and bracket notation here.

There are some important differences between dot and bracket notation:

Dot notation:

Property identifies can only be alphanumeric (and _ and $)

Property identifiers cannot start with a number.

Property identifiers cannot contain variables.

OK — obj.prop_1, obj.prop$

Not OK — obj.1prop, obj.prop name

Bracket notation:

Property identifiers have to be a String or a variable that references a String.

It is okay to use variables, spaces, and Strings that start with numbers

OK — obj["1prop"], obj["prop name"]

edited Dec 30, 2019 at 14:08

Fredrik

3,3508 gold badges37 silver badges72 bronze badges

answered Dec 30, 2019 at 13:54

Corylus

9378 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Can't use $refs using variable name instead of direct value

1 Answer 1

Dot notation:

Bracket notation:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Dot notation:

Bracket notation:

Comments

Your Answer

Sign up or log in

Post as a guest

Related