From 44695d9b6c871bad2366e3fde89969c862341296 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Thu, 26 Dec 2024 23:24:20 +0100
Subject: [PATCH] 03 le lezioni di questa sezione
---
03 - lists conditional/lists-cond-assignment-problem/index.html | 19 ++++++++++++++-----
1 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/03 - lists conditional/lists-cond-assignment-problem/index.html b/03 - lists conditional/lists-cond-assignment-problem/index.html
index c1d904d..cf2fdde 100644
--- a/03 - lists conditional/lists-cond-assignment-problem/index.html
+++ b/03 - lists conditional/lists-cond-assignment-problem/index.html
@@ -9,7 +9,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
- <script src="https://unpkg.com/vue@next" defer></script>
+ <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script>
<script src="app.js" defer></script>
</head>
<body>
@@ -20,14 +20,23 @@
<h2>Assignment</h2>
<!-- 1) Add code to manage a list of tasks in a Vue app -->
<!-- When clicking "Add Task" a new task with the entered text should be added -->
- <input type="text">
- <button>Add Task</button>
- <ul>
+ <input type="text" v-model="taskEntered">
+ <button @click="addTask">Add Task</button>
+ <!-- <ul v-show="showTasks"> -->
<!-- 2) Output the list of tasks here -->
+ <!-- <li v-for="task in tasks">{{task}}</li>
</ul>
+ <ul v-show="!showTasks">
+ </ul> -->
+
+ <ul >
+ <!-- 2) Output the list of tasks here -->
+ <li v-show="showTasks" v-for="task in tasks" :key="task">{{task}}</li>
+ </ul>
+
<!-- 3) When the below button is pressed, the list should be shown or hidden -->
<!-- BONUS: Also update the button caption -->
- <button>Hide / Show List</button>
+ <button @click="toggleTasks">{{toggleTitle}} List</button>
</section>
</body>
</html>
--
Gitblit v1.8.0