diffractive-cookbook/client/components/CookbookForm.js

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> -->
  `,
};