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.

39 lines
858 B
JavaScript

export default {
setup() {
const { ref, computed } = Vue;
const recipes = ref(null);
fetch("https://hub.xpub.nl/soupboat/cookbook/get")
.then((res) => res.json())
.then((data) => (recipes.value = data));
const style = function (index) {
return {
transform: `translate(${index * 10}px, ${index * 10}px)`,
};
};
const browse = function () {
let recipe = recipes.value.pop();
recipes.value.unshift(recipe);
};
return { recipes, style, browse };
},
template: `
<div class="cookbook">
<section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
<h3>{{recipe.title}}</h3>
<p>{{recipe.description}}</p>
<div>{{recipe.nature}}</div>
<ol>
<li v-for="log in recipe.logs">{{log}}</li>
</ol>
<p>{{recipe.who}}</p>
</section>
</div>
`,
};