Skip to content

Template Refs

To access the elements or views of the template in Vue we have template refs available.

In NativeScript-Vue it is exactly the same as Vue but with one change to take into account, to access the native view we must access .nativeView of the reactive reference. Example.

vue
<script lang="ts" setup>
import { ref, onMounted } from "nativescript-vue"
import { type Label } from "@nativescript/core"

const el = ref();

onMounted(() => {
  const labelView = el.value.nativeView as Label;
  labelView.text= "Text changed";
})
</script>

<template>
  <Label ref="el" text="Template Refs" />
</template>

Using useTemplateRef

In nativescript-vue we can also use useTemplateRef​ just like in vue, to access the native view access the .nativeView property of the reactive value.

vue
<script setup>
import { useTemplateRef, onMounted } from "nativescript-vue"
import { type Label } from "@nativescript/core"

// the first argument must match the ref value in the template
const label = useTemplateRef('my-label');

onMounted(() => {
  const labelView = label.value.nativeView as Label;
  labelView.text= "Text changed";
})
</script>

<template>
  <Label ref="my-label" text="Template Refs" />
</template>

Released under the MIT License.