src/food.vue

   1 <!--
   2   **********************************************************************
   3   * Title: DietSurvey
   4   * Description: Nutritional Assessment App
   5   * Author: Agnibho Mondal
   6   * Website: http://code.agnibho.com
   7   **********************************************************************
   8   Copyright (c) 2016 Agnibho Mondal
   9   All rights reserved
  10   **********************************************************************
  11   This file is part of DietSurvey.
  12
  13   DietSurvey is free software: you can redistribute it and/or modify
  14   it under the terms of the GNU General Public License as published by
  15   the Free Software Foundation, either version 3 of the License, or
  16   (at your option) any later version.
  17
  18   DietSurvey is distributed in the hope that it will be useful,
  19   but WITHOUT ANY WARRANTY; without even the implied warranty of
  20   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21   GNU General Public License for more details.
  22
  23   You should have received a copy of the GNU General Public License
  24   along with DietSurvey. If not, see <http://www.gnu.org/licenses/>.
  25   **********************************************************************
  26 -->
  27 <template>
  28   <div class="panel panel-success">
  29     <div class="panel-heading">
  30       <div class="panel-title"><h3>Food Consumption</h3></div>
  31     </div>
  32     <div class="panel-body">
  33       <template v-for="(f, i) in dataObj.food">
  34         <item :data-index="i" :data-item="f" :data-ref="dataRef" v-on:removeItem="removeItem"></item>
  35       </template>
  36       <button v-on:click="addNew" type="button" class="btn btn-success center-block" title="Add item"><span class="glyphicon glyphicon-plus"></span></button>
  37     </div>
  38   </div>
  39 </template>
  40
  41 <script>
  42 import Item from "./item.vue"
  43 export default {
  44   name:"Food",
  45   props:["dataObj", "dataRef"],
  46   methods:{
  47     addNew:function(){
  48       this.dataObj.food.push({name:"", amount:""});
  49     },
  50     removeItem:function(i){
  51       this.dataObj.food.splice(i, 1);
  52     }
  53   },
  54   created:function(){
  55     this.dataObj.food.push({name:"", amount:""});
  56   },
  57   components:{"item": Item}
  58 }
  59 </script>