master
km0 2 years ago
parent b7eb211300
commit 9c530e7bb8

@ -1,18 +1,19 @@
export default {
name : "CookbookForm",
setup(){
const {ref}=Vue
name: "CookbookForm",
setup() {
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>
`,
};

@ -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">
<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" />
<link rel="stylesheet" href="style.css" />
<title>diffractive reading</title>
</head>
<body>
</head>
<body>
<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">
import CookbookForm from "./components/CookbookForm.js"
const { createApp } = Vue
<script type="module">
import CookbookForm from "./components/CookbookForm.js";
const { createApp } = Vue;
createApp({
components : {CookbookForm},
components: { CookbookForm },
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
message: "Hello Vue!",
};
},
}).mount("#app");
</script>
</body>
</html>

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