added v-cloak to prevent from displaying the output on page load

sofiane-abou-abderrahim · Nov 8, 2023 · 9f038ba · 9f038ba
1 parent 1fc9eef
commit 9f038ba
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
         <button v-on:click="addGoal">Add Goal</button>
       </div>
       <ul>
-        <li v-for="goal in goals">{{ goal }}</li>
+        <li v-for="goal in goals" v-cloak>{{ goal }}</li>
       </ul>
     </div>
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

diff --git a/styles.css b/styles.css
@@ -17,7 +17,8 @@ body {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
 }
 
-label, input {
+label,
+input {
   margin-bottom: 0.5rem;
   display: block;
   width: 100%;
@@ -37,4 +38,8 @@ li {
   margin: 1rem 0;
   padding: 1rem;
   border: 1px solid #ccc;
-}
+}
+
+[v-cloak] {
+  display: none;
+}