v-model est une directive bidirectionnelle : elle lie une valeur dans le JavaScript (data) à un élément HTML (input, textarea, select, etc.). Ça permet de synchroniser automatiquement ce que l’utilisateur tape avec mes donnée dans mon script.
<div class="pagination">
<button class="pagination-btn" @click="prevPage">
<ChevronLeft />
</button>
<span class="pagination-text">Page {{ page }}/{{ countTasks }}</span>
<button class="pagination-btn" @click="nextPage">
<ChevronRight />
</button>
</div>
<div v-if="loading" class="loading-message">Chargement en cours...</div>
<div v-else-if="error" class="error-message">{{ error }}</div>
<div v-else-if="!tasks.length" class="empty-message">
Aucune tâche disponible
</div>
<div v-else class="tasks-container">
<div
v-for="task in tasks"
:key="task.taskId"
class="task-item"
:class="{ updating: updatingStates[task.taskId] }"
>
<div class="task-info">
<span class="task-user">{{
task.assignee?.nom || "Non assigné"
}}</span>
<span class="task-text">_{{ task.task }}</span>
<span class="task-meta">
Créée par {{ task.creator?.nom }} le
{{ formatDate(task.createdAt) }}
<span v-if="task.updatedAt !== task.createdAt">
• Modifiée le {{ formatDate(task.updatedAt) }}
</span>
<br />
<span class="redo">Commentaire : {{ task.commentaire }}</span>
</span>
</div>
<div v-if="role === 'admin'" class="task-state">
<select
v-model="task.state"
@change="handleStateChange(task.task_id, $event.target.value)"
class="state-select"
:disabled="updatingStates[task.taskId]"
>
<option value="pending">En attente</option>
<option value="delivered">Livré</option>
</select>
<span v-if="updatingStates[task.taskId]" class="updating-text">
Mise à jour...
</span>
</div>
<div v-else class="task-state">
<span :class="['state-badge', task.state]">
{{ taskStateLabel(task.state) }}
</span>
</div>
</div>
</div>