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.2 KiB
JavaScript

export default {
name: "CookbookForm",
setup() {
const { ref, computed } = Vue;
const title = ref("");
const description = ref("");
const nature = ref("");
const logs = ref([""]);
const who = ref("");
const disabled = computed(() => {
return [title, description, nature, logs, who].some((input) => input.value == "");
});
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, disabled, 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" :disabled="disabled">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> -->
`,
};