Kris01's avatar

Vue Child Not Updating

Hello, My ref in the parent component updates, but it doesn't pass it down to the child, what could I do to fix this?

EDIT: It seems the the props in the child are actually updating, but it won't show on screen

0 likes
6 replies
charles15531's avatar

I guess you are passing this ref data from parent to child using props. Can you post your code so i can see?

1 like
Kris01's avatar

@charles15531

this is my code, the buyers ref won't update after the SearchTemplate child emits the change, I can see in the console.log that the buyer ref is updating inside the handleFilters but I can't see the change on screen

<template>
    
    <div class="cont"> 
        <div class="custom--header--filters"> 


            <div class="row justify-content-between align-items-center mb-4">
                <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 mb-3" style="position: relative">
                    <SearchTemplate @keyup="handleFilters" />
                </div>
                <div class="d-none d-md-block col-lg-2 col-md-3 mb-3">
                </div>
                <div class=" d-none d-lg-block col-lg-2 mb-3">
                </div>


            </div>

            <!-- <FiltersTemplate @keyup="handleFilters" /> -->

            <div class="all-mavens">
                <ul class="mavens-list">
                    <MavenCardTemplate 
                        v-for="maven in buyers"   
                        :maven="maven"      
                    />
                </ul>
            </div>

            
        </div>
    </div>

</template>

<script setup>
    import MavenCardTemplate from "../mavens/card/MavenCard.vue";
    import FiltersTemplate from "./components/filters.vue"
    import SearchTemplate from "./components/searchFilter.vue"
    import { onMounted } from "@vue/runtime-core";
    import { ref } from "@vue/reactivity";

    const buyers = ref ([])

    const props = defineProps({
        mavens : Object
    })

    onMounted(() => {
        buyers.value = props.mavens
    }); 

    const handleFilters = async (mavensFiltered) => {
        buyers.value = mavensFiltered
        console.log(buyers.value)
    }

</script>
Kris01's avatar

this is my MavenCardTemplate child that won't update

const maven = ref ([]);
const user = ref ([])

const props = defineProps({
    maven : Object
})

onMounted(() => {
    maven.value = props.maven;
    user.value = props.maven.user
});
charles15531's avatar

First things first. from your import, ref and onMounted should be imported from 'vue'

ie: import { ref, onMounted } from "vue";

1 like
charles15531's avatar
charles15531
3 years ago
Best Answer
Level 1

Try adding a watch to the maven prop in your 'MavenCardTemplate'

watch(() => props.maven, (newMaven, oldMaven) => { 
   /* ... */ 
console.log(newMaven)
})

NB: Remember to import 'watch' too from vue

Please or to participate in this conversation.