Vuejs typescript this.$refs.<refField>.value does not exist

You can do this:

class YourComponent extends Vue {  $refs!: {    checkboxElement: HTMLFormElement  }  someMethod () {    this.$refs.checkboxElement.checked  }}

From this issue: https://github.com/vuejs/vue-class-component/issues/94

Edit - 2021-03 (Composition API)

Updating this answer because Vue 3 (or the composition API plugin if you're using Vue 2) has some new functions.

<template>  <div ref="root">This is a root element</div></template><script lang="ts">  import { ref, onMounted, defineComponent } from '@vue/composition-api'  export default defineComponent({    setup() {      const root = ref(null)      onMounted(() => {        // the DOM element will be assigned to the ref after initial render        console.log(root.value) // <div>This is a root element</div>      })      return {        root      }    }  })</script>

Edit - 2020-04:

The vue-property-decorator library provides @Ref which I recommend instead of my original answer.

import { Vue, Component, Ref } from 'vue-property-decorator'import AnotherComponent from '@/path/to/another-component.vue'@Componentexport default class YourComponent extends Vue {  @Ref() readonly anotherComponent!: AnotherComponent  @Ref('aButton') readonly button!: HTMLButtonElement}

Original Answer

None of the above answers worked for what I was trying to do. Adding the following $refs property wound up fixing it and seemed to restore the expected properties. I found the solution linked on this github post.

class YourComponent extends Vue {  $refs!: {    vue: Vue,    element: HTMLInputElement,    vues: Vue[],    elements: HTMLInputElement[]  }  someMethod () {    this.$refs.<element>.<attribute>  }}

This worked for me: use(this.$refs.<refField> as any).value or (this.$refs.['refField'] as any).value