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
39 lines
858 B
JavaScript
3 years ago
|
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>
|
||
|
|
`,
|
||
|
|
};
|