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.

<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.

<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>