Level 1
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
Mar 2, 2023
6
Level 3
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
Level 3
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>
Level 3
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
});
Level 1
First things first. from your import, ref and onMounted should be imported from 'vue'
ie: import { ref, onMounted } from "vue";
1 like
Level 3
@charles15531 Changed that, but looks the same!
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.