Storing a Vue/JS element reference in a constant using Typescript

Question

Storing a Vue/JS element reference in a constant using Typescript

In my template, I have one form element and one button element:

  <button
    type="submit"
    id="ms_sign_in_submit"
    ref="submitButton"
    class="btn btn-lg btn-primary w-100 mb-5">
  </button>

Within the script, there is a constant named submitButton.

const submitButton = ref<HTMLButtonElement | null>(null);

Somewhere along the line, the value of the submitButton element (id="ms_sign_in_submit") seems to be assigned or inherited by submitButton.value, although it's not explicitly done within the code. I'm puzzled by how this happens.

html typescript vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

Vue automatically links a template ref to the ref with the same name returned from the setup() function, as shown in the code snippet below:

<template>
  <button ref="submitButton">Submit</button>
</template>     👆

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const submitButton = ref<HTMLButtonElement | null>(null);
    return { submitButton }
  }           👆 /* automatically assigned to matching template ref */
})
</script>

The assignment of the template ref is handled by Vue and does not require explicit intervention.

There seems to be some confusion surrounding the use of const. Even though submitButton is a constant object, its properties can still be changed, unless it is frozen using Object.freeze() or defined with const assertions (as const) in TypeScript (example).

Answer 2

Vue automatically links a template ref to the ref with the same name returned from the setup() function, as shown in the code snippet below:

<template>
  <button ref="submitButton">Submit</button>
</template>     👆

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const submitButton = ref<HTMLButtonElement | null>(null);
    return { submitButton }
  }           👆 /* automatically assigned to matching template ref */
})
</script>

The assignment of the template ref is handled by Vue and does not require explicit intervention.

There seems to be some confusion surrounding the use of const. Even though submitButton is a constant object, its properties can still be changed, unless it is frozen using Object.freeze() or defined with const assertions (as const) in TypeScript (example).

Storing a Vue/JS element reference in a constant using Typescript

Answer №1

Similar questions

"Exploring the world of mocking module functions in Jest

script to pause video using jQuery

Sorting Vue.js properties based on object keys

Can an attribute be assigned to an Angular host element without specifying a value?

Spilling over into the adjacent DIV

The content inside the inner div does not stretch to match the height of its parent element

Unable to display results in React Native due to FlatList not being shown

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

Tips for parsing information contained in a cdata tag using python

Loop through each instance of a data record in a JSON document using Vue's v-for directive

text box with an immobile header

Having trouble sending the request body via next-http-proxy-middleware

Absence of property persists despite the use of null coalescing and optional chaining

Align text in the center of a static container

Is there a way to create a Swipe slideshow without relying on plugins or external tools?

Adjust the canvas size to fit its parent element ion-grid

Changing pricing on pricing table with a click

Avoiding type errors in d3 v5 axis by using Typescript

What is the best method for emptying the input of Vuetify's v-autocomplete using the #clear slot?

Creating text input without borders using HTML and CSS