product.vue

<template>
  <article class="product" transition="test" stagger="200">
    <div class="product__name">
      {{ product.name }}
      <div class="product__price">{{ getTotal | currency }}</div>
      <!-- <span class="product__price" v-if="product.pricing.length === 1">{{ product.pricing[0].price | currency }}</span>
      <select class="product__price" v-else>
        <option v-for="(index, price) in product.pricing">{{ getTotal | currency }}</option>
      </select> -->
    </div>
    <div class="product__sizes" v-if="product.pricing.length > 1">
      <p>Sizes:</p>
      <select v-model="selections.selectedSize">
        <option v-for="(index, price) in product.pricing" v-bind:value="index">{{ price.sl_description }}</option>
      </select>
    </div>
    <div class="product__ingredients" v-if="product.hasOwnProperty('ingredients') && product.ingredients.length">
      Ingredients: <span v-for="ingredient in product.ingredients.modifiers">{{ ingredient.name }}, </span>
    </div>
    <div class="product__selections" v-if="product.hasOwnProperty('selections') && product.selections.length">
      <p>Selections:</p>
      <ul>
        <li v-for="selection in product.selections">{{ selection.prompt }}
          <select>
            <option v-for="mod in selection.modifiers">{{ mod.name }}{{ mod.pricing.length ? ' - ' + mod.pricing[0].price : '' }}</option>
          </select>
        </li>
      </ul>
    </div>
    <div  class="product__addons"v-if="product.hasOwnProperty('addons') && product.addons.length">
      <p>Addons:</p>
      <div v-for="(index, addon) in product.addons">
        <p v-for="mod in addon.modifiers">
          <label><input type="checkbox" @click="toggleMod(index)"> {{ mod.name }} ({{ getModPrice(mod) | currency }})</label>
        </p>
      </div>
      <hr>
      <ul>
        <li v-for="addon in product.addons">{{ addon.prompt }}
          <ul>
            <li v-for="mod in addon.modifiers">{{ mod.name }}
              <ul>
                <li v-for="price in mod.pricing">{{ price.price | currency }}</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <footer class="product__footer">
      <button class="btn btn--main" @click="test(product, selections)">Add</button>
    </footer>
  </article>
</template>

<script>
import { getProductTotal } from '../helpers'

export default {

  props: {
    product: Object,
    add: Function
  },

  methods: {

    test: function() {
      this.$add('someProp', {})
    }

    getModPrice: function(item) {

      if (item.hasOwnProperty('pricing')) {
        if (item.pricing.length) {
          return item.pricing[0].price
        }
      }

      return null
    },

    toggleMod: function(index) {
      if (this.selections.selectedAddons.indexOf(index) > -1) {
        this.selections.selectedAddons.splice(this.selections.selectedAddons.indexOf(index), 1)
      } else {
        this.selections.selectedAddons.push(index)
      }
      console.log(this.selections.selectedAddons)
    }
  },

  computed: {
    getTotal: function() {

      return getProductTotal(this.product, this.selections)

    }
  },

  data() {
    return {
      selections: {
        selectedSize: 0,
        selectedSelections: [],
        selectedAddons: []
      }
    }
  }

}
</script>

<style>
.product {
  position: relative;

  padding: 16px;
  margin-left: -16px;
  margin-right: -16px;
}

.product:not(:first-child) {
  border-top: 1px solid #555;
}

  .product__name {
    font-weight: bold;
  }

  .product__price {
    float: right;
    color: #fdd835;
  }

  .product__ingredients,
  .product__selections,
  .product__addons {
    margin-top: 8px;
  }

  .product__footer {
    margin-top: 8px;
    text-align: right;
  }
</style>