I'm facing an issue with managing dynamic props in Vue with TypeScript. Below is my parent component:
<script setup lang="ts">
const friends = [
{
id: "emanuel",
name: "Emanuella e",
phone: "08788",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7f777b746f7f76767b5a7d777b73..."",
isFavorite: true,
},
{
id: "denta",
name: "Denta W",
phone: "08789",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d797873697c5d7a707c74...:"",
isFavorite: false,
},
];
function toggleFavorite(friendId:any){
console.log(friendId);
const identifiedFriend= friends.find(friend=>friend.id === friendId);
if(identifiedFriend!=undefined){
identifiedFriend.isFavorite=!identifiedFriend.isFavorite
}
console.log(identifiedFriend);
}
</script>
<template>
<section>
<header><h1>Test Friends</h1></header>
<ul>
<friend-container
v-for="friend in friends"
:id="friend.id"
:key="friend.id"
:name="friend.name"
:phone="friend.phone"
:email="friend.email"
:isFavorite="friend.isFavorite"
@toggle-favorite="toggleFavorite"
>
</friend-container>
</ul>
</section>
</template>
Below is my child component:
<template>
<li>
<h2>{{ name }} {{ isFavorite ? "(Favorite)" : "" }}</h2>
<button @click="toggleFavorite">Toggle Favorite</button>
<button @click="toggleDetails">Show details</button>
<ul v-if="detailAreVisible">
<li><strong>Phone: </strong>{{ phone }}</li>
<li><strong>email: </strong>{{ email }}</li>
</ul>
</li>
</template>
<script setup lang="ts">
import { ref} from 'vue';
const detailAreVisible=ref(false);
const props = defineProps<{
id: { type: String; required: true };
name: { type: String; required: true };
phone: { type: String; required: true };
email: { type: String; required: true };
isFavorite: Boolean
}>();
const emit=defineEmits<{
(e: 'toggle-favorite', value: any): void
}>()
function toggleDetails(){
detailAreVisible.value=!detailAreVisible.value
}
function toggleFavorite(){
emit("toggle-favorite",props.id);
}
</script>
I have updated the props data in the parent component using emit event handling. However, the isFavorite value in my child component still cannot be changed. Did I miss something or how should I handle it? Sorry, I'm new to Vue.