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?

vuejs.org/api/composition-api-setup.html#accessing-props

Michal Levý
– Michal Levý

2022-04-26 11:00:03 +00:00
Commented Apr 26, 2022 at 11:00 — Michal Levý
– Michal Levý, Commented Apr 26, 2022 at 11:00

h0p3zZ · Accepted Answer · 2022-04-26 13:50:07Z

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

edited Apr 26, 2022 at 13:50

answered Apr 26, 2022 at 11:20

h0p3zZ

7374 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue3 template, short path to nested object property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related