logs

3 years ago · 9c530e7bb8
parent b7eb211300
commit 9c530e7bb8
3 changed files with 84 additions and 81 deletions
--- a/components/CookbookForm.js
+++ b/components/CookbookForm.js
@ -1,18 +1,19 @@
 export default {
 	name: "CookbookForm",
 	setup() {
-    const {ref}=Vue 
+		const { ref } = Vue;

-    const title = ref('')
-    const description = ref('')
-    const nature = ref('')
-    const log = ref('')
-    const who = ref('')
+		const title = ref("");
+		const description = ref("");
+		const nature = ref("");
+		const logs = ref([""]);
+		const who = ref("");

-    return{title,description,nature,log,who}
+		return { title, description, nature, logs, who };
 	},
 	template: `
-    <form action="">
+
+    <section class='recipe'>
      <label for="title">Title</label>
      <input type="text" v-model='title'/>

@ -22,22 +23,35 @@ export default {
      <label for="nature">Nature of the input</label>
      <input type="text" v-model="nature" />

+      
      <label for="log">Process Log</label>
-    <textarea v-model="log"></textarea>
+    
+      <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index"></textarea>
+      <button @click="logs.push('')">Add Step</button>

      <label for="who">Who</label>
      <input type="text" v-model="who" />
-  </form>
-  
-
-  <pre>
-  title:{{title}}
-  description:{{description}}
-  nature:{{nature}}
-  log:{{log}}
-  who:{{who}}
-  </pre>
-
-
-  `
-}
+    </section>
+
+    <dl>
+      <dt>Title</dt>
+      <dd>{{title}}</dd>     
+
+      <dt>Description</dt>
+      <dd>{{description}}</dd>
+
+      <dt>Nature</dt>
+      <dd>{{nature}}</dd>
+
+      <dt>Log</dt>
+      <dd>
+        <ul>
+          <li v-for="log in logs">{{log}}</li>
+        </ul>
+      </dd>
+            
+      <dt>Who</dt>
+      <dd>{{who}}</dd>
+    </dl>
+  `,
+};
--- a/index.html
+++ b/index.html
@ -1,41 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="style.css" />
 		<title>diffractive reading</title>
 	</head>
 	<body>
-
-
-
-
-
-
-
-
-
-
 		<script src="https://unpkg.com/vue@3"></script>

 		<div id="app"><cookbook-form></cookbook-form></div>

-
 		<script type="module">
-    import CookbookForm from "./components/CookbookForm.js"  
-    const { createApp } = Vue
+			import CookbookForm from "./components/CookbookForm.js";
+			const { createApp } = Vue;
 			createApp({
 				components: { CookbookForm },
 				data() {
 					return {
-        message: 'Hello Vue!'
-      }
-    }
-  }).mount('#app')
+						message: "Hello Vue!",
+					};
+				},
+			}).mount("#app");
 		</script>
-
-
-    
 	</body>
 </html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,2 @@
+.recipe {
+}