using props in computed (vue)

Question

I have this simple 2 component vue app : (nuxt, composition api and ts)

Parent :

<template>
    <input type="text" v-model="txt">
    <Child :txt="txt"></Child>
</template>

<script lang="ts" setup>
let txt = ref("")
</script>

Child :

<template>
    <p>{{ txt }}</p>
    <p>{{ txt + " 1" }}</p>
    <p>{{ txtComputed }}</p>
</template>

<script lang="ts" setup>
const { txt } = defineProps<{
    txt: string
}>()

let txtComputed = computed(() => {
    return txt + " 1"
})
</script>

I would like the txtComputed to change according to the txt. But it's stuck at the first value (just " 1")

If I have more complex logic than just adding 1, I'd like to not code it in the html.

So why is the computed not working with props ?

please share the package.json

Boussadjra Brahim
– Boussadjra Brahim

2023-08-03 05:36:26 +00:00
Commented Aug 3, 2023 at 5:36 — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 3, 2023 at 5:36

Moritz Ringler · Accepted Answer · 2023-08-03 07:35:40Z

9

The returned object from defineProps is a reactive object, similar to ones created with reactive(). When you destructure it, you bind the current values to variables - those values will not be reactive anymore.

As the documentation states:

you need to always access props as props.x in order to retain reactivity. This means you cannot destructure defineProps because the resulting destructured variables are not reactive and will not update.

So if you want to preserve reactivity, you have to assign the result from defineProps directly:

const props = defineProps<...>()
const txtComputed = computed(() => props.txt + " 1")

Alternatively, you can turn individual props into refs with toRef() or all at once with toRefs().

edited Aug 3, 2023 at 7:35

answered Aug 3, 2023 at 7:30

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

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

1 Comment

moxyom Over a year ago

Thank you very much! It's much clearer now ^^

Collectives™ on Stack Overflow

using props in computed (vue)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related