[FIXED] How to get $el in petite vue

Issue

From the example inside the petite vue repo:

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>

<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>

When I am trying to get a p tag like so:

<p ref="foobar">{{ count }}</p>

This returns an error, since this.$refs.foobar is undefined:

increment() {
  console.log(this.$refs.foobar.$el)
  this.count++
}

How can I get the HTML element inside my javascript through $el?

Solution

Credits to @kissu for pointing me to the right discussion form, where I found the answer.

So apparently $refs only works inside of the "component" concept within petite vue.

If you have the following snippet, from the docs, with a ref added to the p tag:

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<div v-scope="Counter({ initialCount: 1 })" @vue:mounted="mounted">
  <p ref="foobar">{{ count }}</p>
  <button @click="inc">increment</button>
</div>

You'll be able to do:

this.$refs.foobar from within that function, to get the element. Note: $el is not needed.

Answered By - Raf Rasenberg

Answer Checked By - Robin (PHPFixing Admin)