[Vuejs]-How can I "dynamically" pass a veux getter as a prop to my child component?

by

3👍

✅

The main difficulty here is that there isn’t a $computed equivalent to $data. If there were this would be easy.

One option is to put an explicit this in the template:

<searchCard :items="this[item.list]">

If you’re running a linter it’ll probably complain about that though.

The instance does have a reference to itself in the _self property. The underscore indicates that it’s private so we shouldn’t really be using it. In theory you could create your own alias:

data () {
  return {
    self: this
  }
}

then:

<searchCard :items="self[item.list]">

Seems a bit hacky though.

There are tricks using property getters that would work but I think that would just complicate things. e.g. Putting a getter on each tab item that proxies through to the relevant list.

The simplest way would probably be to provide a method:

methods: {
  getList (listName) {
    return this[listName]
  }
}

with:

<searchCard :items="getList(item.list)">

To me that seems the least likely to cause confusion to future maintainers of the code.

👤skirtle

Leave a comment