Ability to access the component & element in getters

[stancl]

I'm trying to see if I can make petite-vue work with Livewire and the main issue I'm trying to solve is that I cannot access the element in a getter.

Alpine lets you add magic properties using callbacks like this:

let wire = el => {
    return el.closest('[wire\\:id]').__livewire.$wire;
}

Which is neat, because you get to work with the component. petite-vue only lets you do something like this:

createApp({
  get wire() {
      return 'the same value for all components',
  }
})

I tried to see if the this state would be useful, but it doesn't seem to be.

I'd also add that being able to access the full component state would be ideal, but at the same time magic properties can be used in v-scope/x-data, i.e. before component initialization, which means that there might not be all the necessary state yet.

But being able to access the element at the very least would open up a lot of use cases in my opinion.

Thoughts?

[worldoptimizer]

I was passing in the element as a parameter, given that we have $el on the expressions.
Also, I didn't find a simple way to access other scopes and their states.

[stancl]

Right, even v-scope="wire($el).foo" doesn't work, as $el is not accessible in the initial data.

[worldoptimizer]

Yeah, I was only doing that on assignment in v-text or v-effect etc. once scope was set. Anybody got a better solution?

[ggedde]

@stancl, @worldoptimizer I posted a similar question here: #2
Now that $refs are available in v0.2.3 you should be able to add ref="foo" to your element. Then in your getter just access it by this.$refs.foo.
I have not done this on the root v-scope element, so not sure if it works there or only within children elements of v-scope.
I do think this.$el would be a nice addition, but not necessary with $refs.

[stancl]

I guess if refs can work then implementing $el should be easy? Adding a ref on the root element feels a bit awkward.