parsley/app/javascript/components/RecipeShow.vue

<template>
  <div>
    <div v-if="recipe === null">
      Loading...
    </div>
    <div v-else>
      <h1 class="title">{{ recipe.name }}</h1>
      <div class="subtitle tags">
        <span v-for="tag in recipe.tags" :key="tag" class="tag is-medium">{{tag}}</span>
      </div>
      <hr>
      <div class="level is-mobile">
        <div class="level-item">
          {{ recipe.total_time}} ({{recipe.active_time}})
        </div>

        <div class="level-item">
          <p>Yields</p>
          <p>{{recipe.yields}}</p>
        </div>

        <div class="level-item">
          <p>Source</p>
          <p>{{recipe.source}}</p>
        </div>
      </div>

      <div class="columns">
        <div class="column">
          <div class="message">
            <div class="message-header">Ingredients</div>
            <div class="message-body content">
              <ul v-if="recipe.ingredients.length > 0">
                <li v-for="i in recipe.ingredients">
                  {{i.display_name}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="column">
          <div class="message">
            <div class="message-header">Directions</div>
            <div class="message-body content" v-html="recipe.rendered_steps">
            </div>
          </div>
        </div>
      </div>

      <div class="message">
        <div class="message-header" @click="showNutrition = !showNutrition">Nutrition Data</div>
        <div class="message-body" v-show="showNutrition">
          <table class="table">
            <tr>
              <th>Item</th>
              <th>Value</th>
            </tr>
            <tr v-for="nutrient in recipe.nutrition_data.nutrients" :key="nutrient.name">
              <td>{{nutrient.label}}</td>
              <td>{{nutrient.value}}</td>
            </tr>
          </table>

          <h3 class="title is-5">Nutrition Calculation Warnings</h3>
          <ul>
            <li v-for="warn in recipe.nutrition_data.errors" :key="warn">
              {{warn}}
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    props: {
      recipe: {
        required: true,
        type: Object
      }
    },

    data() {
      return {
        showNutrition: false
      };
    }
  }

</script>

<style lang="scss" scoped>
</style>