logs
parent
b7eb211300
commit
9c530e7bb8
@ -1,43 +1,57 @@
|
||||
export default {
|
||||
name : "CookbookForm",
|
||||
setup(){
|
||||
const {ref}=Vue
|
||||
|
||||
const title = ref('')
|
||||
const description = ref('')
|
||||
const nature = ref('')
|
||||
const log = ref('')
|
||||
const who = ref('')
|
||||
|
||||
return{title,description,nature,log,who}
|
||||
},
|
||||
template: `
|
||||
<form action="">
|
||||
<label for="title">Title</label>
|
||||
<input type="text" v-model='title'/>
|
||||
|
||||
<label for="description">Description</label>
|
||||
<textarea v-model="description"></textarea>
|
||||
|
||||
<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>
|
||||
|
||||
<label for="who">Who</label>
|
||||
<input type="text" v-model="who" />
|
||||
</form>
|
||||
|
||||
|
||||
<pre>
|
||||
title:{{title}}
|
||||
description:{{description}}
|
||||
nature:{{nature}}
|
||||
log:{{log}}
|
||||
who:{{who}}
|
||||
</pre>
|
||||
|
||||
|
||||
`
|
||||
}
|
||||
name: "CookbookForm",
|
||||
setup() {
|
||||
const { ref } = Vue;
|
||||
|
||||
const title = ref("");
|
||||
const description = ref("");
|
||||
const nature = ref("");
|
||||
const logs = ref([""]);
|
||||
const who = ref("");
|
||||
|
||||
return { title, description, nature, logs, who };
|
||||
},
|
||||
template: `
|
||||
|
||||
<section class='recipe'>
|
||||
<label for="title">Title</label>
|
||||
<input type="text" v-model='title'/>
|
||||
|
||||
<label for="description">Description</label>
|
||||
<textarea v-model="description"></textarea>
|
||||
|
||||
<label for="nature">Nature of the input</label>
|
||||
<input type="text" v-model="nature" />
|
||||
|
||||
|
||||
<label for="log">Process Log</label>
|
||||
|
||||
<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" />
|
||||
</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">
|
||||
<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
|
||||
createApp({
|
||||
components : {CookbookForm},
|
||||
data() {
|
||||
return {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<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>
|
||||
<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;
|
||||
createApp({
|
||||
components: { CookbookForm },
|
||||
data() {
|
||||
return {
|
||||
message: "Hello Vue!",
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue