I’m currently delving into the world of VueJS and working on a simple to-do list application. The issue I’m facing is that I can't seem to successfully pass an array to the child component responsible for displaying the list:
Parent Component
<template>
<div class="container">
<div class="row">
<div class="col-xl-5 mx-auto">
<form @submit.prevent="submitForm()">
<div class="row form-group mb-2">
<div class="col-xl-12">
<input type="text" placeholder="Name" v-model="stati.nome" class="form-control" @input="v$.nome.$touch" :class="{ 'is-invalid': v$.nome.$error, 'is-valid': !v$.nome.$invalid}"/>
</div>
</div>
<div class="row form-group mb-2">
<div class="col-xl-12">
<input type="text" placeholder="Surname" v-model="stati.cognome" class="form-control" @input="v$.cognome.$touch" :class="{ 'is-invalid': v$.cognome.$error, 'is-valid': !v$.cognome.$invalid}"/>
</div>
</div>
<div class="row form-group mb-2">
<div class="col-xl-12">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
<TabellaCandidati :Candidati="Candidati"></TabellaCandidati>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required } from '@vuelidate/validators'
import TabellaCandidati from './TabellaCandidati.vue';
const stati = reactive({
nome: '',
cognome:'',
})
const regole = computed(() => {
return{
nome: { required },
cognome: { required },
}
})
const v$ = useVuelidate(regole, stati)
const Candidati = ref([]);
const submitForm = async () =>{
const FormValidato = await v$.value.$validate();
if (FormValidato) {
Candidati.value.push({
id: Math.floor(Math.random() * 100),
nome: stati.nome,
cognome: stati.cognome,
})
}
}
</script>
Child Component
<template>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</template>
<script setup>
import { defineProps } from 'vue';
const {Candidati} = defineProps(['Candidati']);
</script>
Where am I going wrong? Apologies, still in the learning phase...
I’m attempting to send an array containing the child component list, but I keep encountering the error "Destructuring the props will cause the value to lose reactivity."