logs
parent
b7eb211300
commit
9c530e7bb8
@ -1,43 +1,57 @@
|
|||||||
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="">
|
|
||||||
<label for="title">Title</label>
|
<section class='recipe'>
|
||||||
<input type="text" v-model='title'/>
|
<label for="title">Title</label>
|
||||||
|
<input type="text" v-model='title'/>
|
||||||
<label for="description">Description</label>
|
|
||||||
<textarea v-model="description"></textarea>
|
<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="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="log">Process Log</label>
|
||||||
<label for="who">Who</label>
|
|
||||||
<input type="text" v-model="who" />
|
<textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index"></textarea>
|
||||||
</form>
|
<button @click="logs.push('')">Add Step</button>
|
||||||
|
|
||||||
|
<label for="who">Who</label>
|
||||||
<pre>
|
<input type="text" v-model="who" />
|
||||||
title:{{title}}
|
</section>
|
||||||
description:{{description}}
|
|
||||||
nature:{{nature}}
|
<dl>
|
||||||
log:{{log}}
|
<dt>Title</dt>
|
||||||
who:{{who}}
|
<dd>{{title}}</dd>
|
||||||
</pre>
|
|
||||||
|
<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>
|
<!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" />
|
||||||
<title>diffractive reading</title>
|
<link rel="stylesheet" href="style.css" />
|
||||||
</head>
|
<title>diffractive reading</title>
|
||||||
<body>
|
</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 },
|
||||||
<script src="https://unpkg.com/vue@3"></script>
|
data() {
|
||||||
|
return {
|
||||||
<div id="app"><cookbook-form></cookbook-form></div>
|
message: "Hello Vue!",
|
||||||
|
};
|
||||||
|
},
|
||||||
<script type="module">
|
}).mount("#app");
|
||||||
import CookbookForm from "./components/CookbookForm.js"
|
</script>
|
||||||
const { createApp } = Vue
|
</body>
|
||||||
createApp({
|
</html>
|
||||||
components : {CookbookForm},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
message: 'Hello Vue!'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).mount('#app')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue