src/family.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>Family Information</h3></div>
  31     </div>
  32     <div class="panel-body">
  33       <!--head
  34       <form>
  35         <div class="form-group">
  36           <label>Head of the Family:</label>
  37           <input class="form-control" type="text" placeholder="Enter full name"></div>
  38       </form>
  39       -->
  40       <template v-for="(m, i) in dataObj.family">
  41         <member :data-index="i" :data-member="m" v-on:removeMember="removeMember"></member>
  42       </template>
  43       <button v-on:click="addNew" type="button" class="btn btn-success center-block" title="Add member"><span class="glyphicon glyphicon-plus"></span></button>
  44     </div>
  45   </div>
  46 </template>
  47
  48 <script>
  49 import Member from "./member.vue"
  50 export default {
  51   name:"Family",
  52   props:["dataObj"],
  53   methods:{
  54     addNew:function(){
  55       this.dataObj.family.push({name:"", age:"", month:"", sex:"", work:"sedentary", state:"npnl"});
  56     },
  57     removeMember:function(i){
  58       this.dataObj.family.splice(i, 1);
  59     }
  60   },
  61   created:function(){
  62     this.dataObj.family.push({name:"", age:"", month:"", sex:"", work:"sedentary", state:"npnl"});
  63   },
  64   components:{"member":Member}
  65 }
  66 </script>