Composant Tache.vue

Comme notre application finale possédera plusieurs liste de tâches (à faire, terminées), nous allons créer un composant TaskComponent.vue.

Créer un nouveau fichier TaskComponent.vue dans src/components/ et y coller le code suivant :

src/components/Taches/Tache.vue

<template>

</template>

<script setup>

</script>

<style>

</style>

Importer le code de PageTaches.vue

1. Couper le code représentant une tache <q-item> dans PageTaches.vue

2. Le coller dans le <template> de composant TaskComponent.vue .

3. Retirer les directives v-for et :key de <q-item>.

src/components/Taches/Tache.vue

<template>
  <q-item
    @click="tache.terminee = !tache.terminee"
    clickable
    v-ripple
    :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
  >
    <q-item-section side>
      <q-checkbox v-model="tache.terminee" />
    </q-item-section>

    <q-item-section>
      <q-item-label
        :class="{ 'text-barre': tache.terminee }"
      >{{ tache.nom }}</q-item-label>
    </q-item-section>

    <q-item-section side>
      <!-- Création d'une ligne Flex -->
      <div class="row">
        <!-- Création d'une colonne Flex -->
        <div class="column justify-center">
          <q-icon
            size="18px"
            name="event"
            class="q-mr-xs"
          />
        </div>
        <!-- Création d'une colonne Flex -->
        <div class="column">
          <q-item-label
            class="text-right"
            caption
          >
            {{ tache.dateFin }}
          </q-item-label>
          <q-item-label
            class="text-right"
            caption
          >
            <small>{{ tache.heureFin}}</small>
          </q-item-label>
        </div>
      </div>
    </q-item-section>
  </q-item>
</template>

Ajouter une propriété tache

Le code coller ci-dessus contient une propriété tache inconnue de notre composant.

Pour palier à ce problème, ajouter une propriété tâche de type Object et obligatoire au composant TaskComponent.vue.

src/components/TaskComponent.vue

<script setup>
const { tache } = defineProps({ tache: Object })
</script>

Ajouter un événement toggle

Pour basculer les états de nos tâches, il faut mettre en place un évènement, comme suit:

<script setup>
const { tache } = defineProps({ tache: Object })
const emits = defineEmits(["toggle"])
</script>

Puis, l'intégrer dans notre template:

<template>
  <q-item
    @click="emits('toggle')"
    clickable
    v-ripple
    :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
  >
    <q-item-section side>
      <q-checkbox :modelValue="tache.terminee" @update:modelValue="emits('toggle')" />
    </q-item-section>
    <!-- ... -->
  </q-item>
</template>

Utiliser le composant <TaskComponent> dans PageTaches.vue

Importer le composant dans PageTaches.vue

Pour pouvoir utiliser un composant dans un autre, il faut importer son code. Il faut donc ajouter TaskComponent.vue dans PageTaches.vue :

src/pages/PageTaches.vue

import Task from 'components/TaskComponent.vue'

Ajouter <tache> dans le template de PageTaches.vue

Il ne reste plusqu'à intégrer <Task> au template de PageTaches.vue et de le "boucler" avec v-for.

1. Ajouter le composant <Task> dans le template de PageTaches.vue

2. Ajouter un directive v-for et :key,

3. Affecter la tache parcourue comme propriété du composant <Tache>

4. Ajouter l'évènement toggle

src/pages/PageTaches.vue

<template>
  <q-page padding>
    <q-list separator bordered>
      <Task v-for="tache in store.taches"
             :key="tache.id"
             :tache="tache"
             @toggle="() => store.taches[index].terminee = !store.taches[index].terminee"
          />
    </q-list>
  </q-page>
</template>

Résultat

TaskComponent.vue

src/components/Tache.vue

<template>
  <q-item
    @click="emits('toggle')"
    clickable
    v-ripple
    :class="tache.terminee ? 'bg-green-1' : 'bg-orange-1'"
  >
    <q-item-section side>
      <q-checkbox :modelValue="tache.terminee" @update:modelValue="emits('toggle')" />
    </q-item-section>

    <q-item-section>
      <q-item-label
        :class="{ 'text-barre': tache.terminee }"
      >{{ tache.nom }}</q-item-label>
    </q-item-section>

    <q-item-section side>
      <!-- Création d'une ligne Flex -->
      <div class="row">
        <!-- Création d'une colonne Flex -->
        <div class="column justify-center">
          <q-icon
            size="18px"
            name="event"
            class="q-mr-xs"
          />
        </div>
        <!-- Création d'une colonne Flex -->
        <div class="column">
          <q-item-label
            class="text-right"
            caption
          >
            {{ tache.dateFin }}
          </q-item-label>
          <q-item-label
            class="text-right"
            caption
          >
            <small>{{ tache.heureFin }}</small>
          </q-item-label>
        </div>
      </div>
    </q-item-section>
  </q-item>
</template>

<script setup>
const { tache } = defineProps({ tache: Object })
const emits = defineEmits(["toggle"])
</script>

<style scoped lang="scss">

</style>

PageTaches.vue