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.
43 lines
1.0 KiB
JavaScript
43 lines
1.0 KiB
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()" :key="recipe">
|
|
<h3 class="title">{{recipe.title}}</h3>
|
|
<div class="description">{{recipe.description}}</div>
|
|
<div class="label">It works with <span class="nature">{{recipe.nature}}</span></div>
|
|
|
|
<div class="label">
|
|
Steps:
|
|
</div>
|
|
<ol>
|
|
<li v-for="log in recipe.logs">{{log}}</li>
|
|
</ol>
|
|
<p class="from">from {{recipe.who}}</p>
|
|
</section>
|
|
</div>
|
|
`,
|
|
};
|