CODEWITHSUNDEEP
vue.jsrefs
drake035
drake035

Reputation: 2887

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

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?

Upvotes: 1

Views: 906

Answers (1)

Corylus
Corylus

Reputation: 889

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"]

Upvotes: 1

Related Questions