grgr
/
diffractive-cookbook
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

logs

Browse Source
master
km0 2 years ago
parent b7eb211300
commit 9c530e7bb8
3 changed files with 84 additions and 81 deletions
Show Stats Download Patch File Download Diff File

64
components/CookbookForm.js
Unescape Escape View File

@ -1,18 +1,19 @@
export default { export default {
name : "CookbookForm", name: "CookbookForm",
setup(){ setup() {
const {ref}=Vue const { ref } = Vue;
const title = ref('') const title = ref("");
const description = ref('') const description = ref("");
const nature = ref('') const nature = ref("");
const log = ref('') const logs = ref([""]);
const who = ref('') const who = ref("");
return{title,description,nature,log,who} return { title, description, nature, logs, who };
}, },
template: ` template: `
<form action="">
<section class='recipe'>
<label for="title">Title</label> <label for="title">Title</label>
<input type="text" v-model='title'/> <input type="text" v-model='title'/>
@ -22,22 +23,35 @@ export default {
<label for="nature">Nature of the input</label> <label for="nature">Nature of the input</label>
<input type="text" v-model="nature" /> <input type="text" v-model="nature" />
<label for="log">Process Log</label> <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> <label for="who">Who</label>
<input type="text" v-model="who" /> <input type="text" v-model="who" />
</form> </section>
<dl>
<pre> <dt>Title</dt>
title:{{title}} <dd>{{title}}</dd>
description:{{description}}
nature:{{nature}} <dt>Description</dt>
log:{{log}} <dd>{{description}}</dd>
who:{{who}}
</pre> <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>
`,
};

49
index.html
Unescape Escape View File

@ -1,41 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>diffractive reading</title> <title>diffractive reading</title>
</head> </head>
<body> <body>
<script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue@3"></script>
<div id="app"><cookbook-form></cookbook-form></div> <div id="app"><cookbook-form></cookbook-form></div>
<script type="module"> <script type="module">
import CookbookForm from "./components/CookbookForm.js" import CookbookForm from "./components/CookbookForm.js";
const { createApp } = Vue const { createApp } = Vue;
createApp({ createApp({
components : {CookbookForm}, components: { CookbookForm },
data() { data() {
return { return {
message: 'Hello Vue!' message: "Hello Vue!",
} };
} },
}).mount('#app') }).mount("#app");
</script> </script>
</body>
</body>
</html> </html>

2
style.css
Unescape Escape View File

@ -0,0 +1,2 @@
.recipe {
}
Write Preview
Loading…
Cancel
Save