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

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("http://127.0.0.1:5000/soupboat/coockbook/", {
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> -->
`,
};