nomoney4me · July 29, 2017 17:35
diff --git a/tmp.html b/tmp.html
 <!doctype html>
 <html>
  <head>
    <!-- Add this to <head> -->
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
    <!-- Add this after vue.js -->
    <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    
    <style>
      .clear {
        clear:both;
      }
    </style>
  </head>
  <body class="container-fluid" style="padding:20px;">
    <div id="grocerylist">
      <div id="newRecipe">
        <p>
          <b-btn v-b-toggle.collapse1 variant="primary">Add New Recipe</b-btn>
        </p>
        <b-collapse id="collapse1">
          <b-card>
            Recipe Name: <input type="text" v-model="NewRecipe.Name" placeholder="Recipe Name"/><br>
            Ingredients: <b-btn @click="NewIngredient">+</b-btn>
              <div v-for="(value, index) in NewRecipe.Ingredients" >
                <input name="Ingredient" v-model="NewRecipe.Ingredients[index]" placeholder="Enter an ingredient."/>
              </div>
            <p><button @click="Save()">Submit</button></p>
          </b-card>
        </b-collapse>
      </div>

      <div id="recipes" class="row">
        <div class="col-8">
          <b-card class="mb-2" align="center" variant="success" v-for="recipe in recipes" style="float:left;padding:20px; margin:20px;" >
            {{recipe.Name}}
          </b-card>
        </div>

        <div class="col-4">
          master grocery list goes here
          <ul>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
    
    <script>
      new Vue({
        el:'#grocerylist',
        data: function() {
          return {
            NewRecipe: {
              Name:"",
              Ingredients:[] 
            },
            recipes:[]
          }
        },
        created: function() {
          this.fetchRecipe();
        },
        methods: {
          fetchRecipe: function() {
            /* fetch('/grocerylist/getRecipes').then(function(data) {
              return data.json()
            }).then(function(data) {
              this.recipes = data;
            }) */
            var data = [
              {Name:'recipe 1'},
              {Name:'recipe 2'}
            ]
            this.recipes = data;
          },
          NewIngredient: function() {
            this.NewRecipe.Ingredients.push("")
          },
          Save: function() {
            fetch('/grocerylist/insertRecipe', {
              method: 'POST',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify(this.NewRecipe)
            }).then(function(response) {
              console.log(response.json())
            })
          }
        }
      })
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<!-- Add this to <head> -->
	<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
	<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
	<!-- Add this after vue.js -->
	<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
	<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
	<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

	<style>
	.clear {
	clear:both;
	}
	</style>
	</head>
	<body class="container-fluid" style="padding:20px;">
	<div id="grocerylist">
	<div id="newRecipe">
	<p>
	<b-btn v-b-toggle.collapse1 variant="primary">Add New Recipe</b-btn>
	</p>
	<b-collapse id="collapse1">
	<b-card>
	Recipe Name: <input type="text" v-model="NewRecipe.Name" placeholder="Recipe Name"/><br>
	Ingredients: <b-btn @click="NewIngredient">+</b-btn>
	<div v-for="(value, index) in NewRecipe.Ingredients" >
	<input name="Ingredient" v-model="NewRecipe.Ingredients[index]" placeholder="Enter an ingredient."/>
	</div>
	<p><button @click="Save()">Submit</button></p>
	</b-card>
	</b-collapse>
	</div>

	<div id="recipes" class="row">
	<div class="col-8">
	<b-card class="mb-2" align="center" variant="success" v-for="recipe in recipes" style="float:left;padding:20px; margin:20px;" >
	{{recipe.Name}}
	</b-card>
	</div>

	<div class="col-4">
	master grocery list goes here
	<ul>
	<li></li>
	</ul>
	</div>
	</div>
	</div>

	<script>
	new Vue({
	el:'#grocerylist',
	data: function() {
	return {
	NewRecipe: {
	Name:"",
	Ingredients:[]
	},
	recipes:[]
	}
	},
	created: function() {
	this.fetchRecipe();
	},
	methods: {
	fetchRecipe: function() {
	/* fetch('/grocerylist/getRecipes').then(function(data) {
	return data.json()
	}).then(function(data) {
	this.recipes = data;
	}) */
	var data = [
	{Name:'recipe 1'},
	{Name:'recipe 2'}
	]
	this.recipes = data;
	},
	NewIngredient: function() {
	this.NewRecipe.Ingredients.push("")
	},
	Save: function() {
	fetch('/grocerylist/insertRecipe', {
	method: 'POST',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(this.NewRecipe)
	}).then(function(response) {
	console.log(response.json())
	})
	}
	}
	})
	</script>
	</body>
	</html>