Vue props reactivity

Hi everyone. I've got a problem and don't know how to solve it. I'm trying to pass data that I get from one input in the parent component with v-model to a child component and I need it to keep its reactivity. The docs say I can use toRef/toRefs to achieve that but still I can't make it to work, the data that I need to be reactive with the child isn't changed as it should be (probably I didn't understand how to use it properly). Can someone show me how to do it?

MohamedTammam

3 years ago

Level 51

Can you please share some code.

Antonio Orlando

3 years ago

Level 27

Parent Component

<script setup>
imports stuff

const props = defineProps({
    patients: Object,
    filters: Object
})

let search = ref(props.filters.search)

//props.filters.search is the default value when the user types something in the input and refreshes the page

</script>
<template>
    <div>
        <input placeholder="Search..." v-model="search" type="text" class="py-1 px-2 max-w-xs" />
    </div>
</template>

//Child I want the data to keep its reactivity
<Pagination class="mt-4" :patients="props.patients" :filters="props.filters :search="search" />

And in the child I want to share the "search" prop but I also want it to keep its reactivity

Child Component

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
    patients: Object,
    filters: Object,
    search: String
})

const inputs = ref(props.search)

const testInput = computed(() => newInput.value)

// None of these worked
console.log(inputs.value)
console.log(testInput.value)
console.log(props.search.value)

</script>

Tried to use toRef(search) but it seems it only works if I want to get a specific piece of data from an object as reactive data since it expects the key

Please or to participate in this conversation.