Simple todo list in vue

Question

i am learning vuejs and i'm building a small todo list app. I can't pass the array though to the child component that takes care of 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="Nome" 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="Cognome" 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">Invia</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>

What am I doing wrong? Sorry I'm learning...

I am trying to pass an array which contains the child component list But I keep getting this error "Destructuring the props will cause the value to lose reactivity"

Answer 1

It is because ref variable being passed into the child component shouldn't be destructed here: const {Candidati} = defineProps(['Candidati']);. It'll lose reactivity like the error says. See: in vue 3.3 alpha 4 props destructure