Vue3 template, short path to nested object property

Question

How to prepare a property for template? This code throws an error:

<script setup>
  ...
  const props = defineProps<{ datails: TData }>();
  const value = props.datails.value; // i dont want to use long paths in the template
</script>

<template>
  <div>
    <a>{{ value }}</a>
...

The error: error Getting a value from the 'props' in root scope of will cause the value to lose reactivity vue/no-setup-props-destructure

So how to short paths for data binding in the template please?

Answer 1

This is how you quickly convert props to refs:

<script setup>
  import { toRefs } from 'vue';
  const props = defineProps({ details: String });
  
  const { details } = toRefs(props);
</script>

<template>
  <div>
    <a>{{ details }}</a>
  </div>
</template>

And the error you are getting could be prevented by just by writing ref(props.datails.value) so the object won't loose reactivity.

Watch out for the usage of defineProps