src/item.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-default">
  29     <div class="panel-body">
  30       <div class="row"><button v-on:click="remove" type="button" class="close pull-left" style="margin-left:10px" title="Remove item"><span aria-hidden="true">&times;</span></button></div>
  31       <form class="form-horizontal" data-toggle="validator">
  32         <div class="form-group">
  33           <label class="col-sm-4 control-label">Food Item:</label>
  34           <div class="col-sm-8">
  35             <select v-model="dataItem.name" class="form-control">
  36               <option value="">---select a food item---</option>
  37               <option v-for="i in dataRef.food">{{i.name}}</option>
  38             </select>
  39           </div>
  40         </div>
  41         <div class="form-group">
  42           <label class="col-sm-4 control-label">Amount:</label>
  43           <div class="col-sm-8">
  44             <input v-model="dataItem.amount" class="form-control" type="number" min=0 step="0.1" placeholder="Enter amount in gm or ml"><div class="help-block with-errors"></div>
  45           </div>
  46         </div>
  47     </div>
  48   </div>
  49 </template>
  50
  51 <script>
  52 export default {
  53   name:"Item",
  54   props:["dataIndex", "dataItem", "dataRef"],
  55   methods:{
  56     remove:function(){
  57       this.$emit("removeItem", this.dataIndex);
  58     }
  59   }
  60 }
  61 </script>