Vue3 and Typescript issue: The property '$el' is not recognized on type 'void'. What is the correct way to access every existing tag type in the DOM?

Question

Vue3 and Typescript issue: The property '$el' is not recognized on type 'void'. What is the correct way to access every existing tag type in the DOM?

Currently, I am in the process of migrating a Vue2 project to Vue3 and Typescript. While encountering several unusual errors, one particular issue with $el has me puzzled.

I have been attempting to target every <g> tag within the provided template, which I can manage to do, but this persistent error hinders my progress.

Any suggestions on resolving this dilemma?

The template for the component is below; however, due to its extensive size, it cannot be fully displayed here. My goal is to identify the <g> tag.

<template>
  <div class="pep-header-decoration-light">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1158.942"
      height="143.376"
      viewBox="0 0 1158.942 143.376"
    >
      <g :style="`color: ${colors.green}`">
        <!-- ... -->
      </g>
      <!-- numerous other g elements to select from here as well -->
    </svg>
  </div>
</template>

typescript vue.js vuejs3

Answer 1

Answer №1

Just like in the query Vue 3 Composition API - How to access the component element ($el) that the component is mounted on, Vue 3 advises against utilizing $el because components can contain multiple top-level elements. Also, your arrow function will not redefine this, and this is not accessible in setup:

setup() itself does not possess access to the component instance - within setup(), this will have a value of null. You can retrieve Composition-API-exposed values from Options API, but not vice versa.

Therefore, it would be a good idea to define a ref for either your containing div or your enclosing svg, and utilize that to reach your element:

<template>
  <div class="pep-header-decoration-light" ref="divEl">
    <svg [...]>
      <!-- ... -->
    </svg>
  </div>
</template>

Keep in mind that you must return the new ref in the object that setup returns, and that it should have the same name as in the template. You can later access this using this.$refs.divEl, but within the setup function, you do not have access to this to reach this.$refs.

setup(props) {
  const divEl = ref<HTMLDivElement>(); // create the ref here
  onMounted(() => {
    // without `this` and `$el`, use `divEl.value`
    const shapes = divEl.value.querySelectorAll("svg > g");
    // ...
  });
  // ...
  return {divEl}; // exposes the ref named `divEl`, and since it matches
                  // the template, vue will populate it during mount
}

Answer 2

Just like in the query Vue 3 Composition API - How to access the component element ($el) that the component is mounted on, Vue 3 advises against utilizing $el because components can contain multiple top-level elements. Also, your arrow function will not redefine this, and this is not accessible in setup:

setup() itself does not possess access to the component instance - within setup(), this will have a value of null. You can retrieve Composition-API-exposed values from Options API, but not vice versa.

Therefore, it would be a good idea to define a ref for either your containing div or your enclosing svg, and utilize that to reach your element:

<template>
  <div class="pep-header-decoration-light" ref="divEl">
    <svg [...]>
      <!-- ... -->
    </svg>
  </div>
</template>

Keep in mind that you must return the new ref in the object that setup returns, and that it should have the same name as in the template. You can later access this using this.$refs.divEl, but within the setup function, you do not have access to this to reach this.$refs.

setup(props) {
  const divEl = ref<HTMLDivElement>(); // create the ref here
  onMounted(() => {
    // without `this` and `$el`, use `divEl.value`
    const shapes = divEl.value.querySelectorAll("svg > g");
    // ...
  });
  // ...
  return {divEl}; // exposes the ref named `divEl`, and since it matches
                  // the template, vue will populate it during mount
}

Vue3 and Typescript issue: The property '$el' is not recognized on type 'void'. What is the correct way to access every existing tag type in the DOM?

Answer №1

Similar questions

Unlock the Full Potential of TypeScript: Seamless Export of Classes and Functions

Dynamically display or conceal a b-table column depending on store getters

Mapbox GL JS stops displaying layers once a specific zoom level or distance threshold is reached

Is conditional rendering in Vue JS determined by the URL address?

Guide on saving a PDF file after receiving a binary response using axios

Error: Invalid connection string for ELF Lambda detected

Using React to make an API call without utilizing hooks

Using TypeScript in React, how can I implement automation to increment a number column in a datatable?

Is it possible to efficiently utilize Map/Set in TypeScript/JavaScript when working with objects?

Using Typescript, a vuex getter that includes an argument can be implemented to

What is the process for transforming a markdown image into a Vue component in Vue3?

The unique Angular type cannot be assigned to the NgIterable type

The css-loader is missing the required dependency peer Webpack5, causing a resolution error

Processing HTTP requests routed from Firebase Hosting to Cloud Functions

Global Enum in Typescript that is Optimized for Inlining during Compilation

Every time I insert a new column, the table in Vue 3 undergoes a reload

Is it necessary for the React generic type prop to be an extension of another type

Cannot proceed with module import: Type 'ModuleWithProviders<T>' must have a single type argument

VueJs Multipage Application

Error with constructor argument in NestJS validator