0

I'm using Vue 3 latest.

Outer template:

<base-table @row-click="routeToEdit" ...>
  ... slots
</base-table>

Inner BaseTable component on my tr div:

<div @click="triggerRowClick(item)">...</div>

In methods of BaseTable:

  methods: {
    triggerRowClick(item) {
      this.$emit('row-click', { item });
    },
  },

And back out in my outer template... this is undefined and I have no access to $router or anything else :(

  methods: {
    routeToEdit: ({ item }) => {
      // this.$router.push('room_edit', { params: { room_id: item.id } });
      console.log(item);
    },
  },
Daniel
  • 34,125
  • 17
  • 102
  • 150
Tallboy
  • 12,847
  • 13
  • 82
  • 173
  • Actually that does help, but indirectly. I used an arrow function when I should have used a regular function. One lamenting point, I HATE the current state of stack overflow where the last 5 questions I've asked all get voted to close. Usually questions are nuanced, which is why we have tags to begin with. For example, a beginner reading that thread in no way would likely pick up on that in the linked thread (the thread mentions to use arrow functions, and in this case that's what broke it because I should have used a regular function definition). – Tallboy Sep 12 '20 at 03:16
  • This is more a duplicate of [Use arrow function in vue computed does not work](https://stackoverflow.com/questions/42971081/use-arrow-function-in-vue-computed-does-not-work). Even though that question talks about `computed`, the cause and solution are the same for your question. – tony19 Sep 12 '20 at 03:49

0 Answers0