You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
export default {
|
|
name: "CookbookForm",
|
|
setup() {
|
|
const { ref } = Vue;
|
|
|
|
const title = ref("SI18.5 - Diffractive Cookbook");
|
|
const description = ref("Compiling and sharing methods for diffractive reading.");
|
|
const nature = ref("Methods");
|
|
const logs = ref([
|
|
"Do the assignment proposed by Femke",
|
|
"While doing the assignment, make sure to track your method with the help of the following form",
|
|
"This method will be used by others and applied on different resources",
|
|
]);
|
|
const who = ref("Grr, Kamo, Kimberley");
|
|
|
|
const submit = function () {
|
|
fetch("https://hub.xpub.nl/soupboat/cookbook/", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
title: title.value,
|
|
description: description.value,
|
|
nature: nature.value,
|
|
logs: logs.value,
|
|
who: who.value,
|
|
}),
|
|
});
|
|
};
|
|
|
|
return { title, description, nature, logs, who, submit };
|
|
},
|
|
template: `
|
|
<section class='recipe'>
|
|
<div class="entry">
|
|
<label for="title">Title</label>
|
|
<input type="text" v-model='title'/>
|
|
</div>
|
|
|
|
<div class="entry">
|
|
<label for="description">Description</label>
|
|
<textarea v-model="description"></textarea>
|
|
</div>
|
|
|
|
<div class="entry">
|
|
<label for="nature">Nature of the input</label>
|
|
<input type="text" v-model="nature" />
|
|
</div>
|
|
|
|
<div class="entry">
|
|
<label for="log">Process Log</label>
|
|
<textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
|
|
<button class="add" @click="logs.push('')">+</button>
|
|
</div>
|
|
|
|
<div class="entry">
|
|
<label for="who">Who</label>
|
|
<input type="text" v-model="who" />
|
|
</div>
|
|
|
|
<div class="entry">
|
|
<button @click="submit" class="submit">Submit</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <dl>
|
|
<dt>Title</dt>
|
|
<dd>{{title}}</dd>
|
|
|
|
<dt>Description</dt>
|
|
<dd>{{description}}</dd>
|
|
|
|
<dt>Nature</dt>
|
|
<dd>{{nature}}</dd>
|
|
|
|
<dt>Log</dt>
|
|
<dd>
|
|
<ol>
|
|
<li v-for="log in logs">{{log}}</li>
|
|
</ol>
|
|
</dd>
|
|
|
|
<dt>Who</dt>
|
|
<dd>{{who}}</dd>
|
|
</dl> -->
|
|
`,
|
|
};
|