Vue_demo

demo

by rokerok_22

HTML

<div id="app">
  <h2>Todos:</h2>
  <div class="">
		<div class="row" v-if='seen == true'>
			<input type="text" v-model="title">
			<input class="btn_m" type="text" v-model="desc">
			<button class="btn_m" @click="addProject">Добавить</button>		
		</div>
		<div class="row" v-for="group in groups">
			<div class="">
				<button class="btn_m btn-success" @click="projectList(group)" >
          {{ group.name }}
        </button>
					<div v-if="seen_2 == true">
						<div v-for="object in grNum.arr">
              {{ object.title }} - {{ object.desc }}
            </div>
					</div>
			</div>
		</div>
	</div>  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: grey;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.btn_m {
	margin: 2% 0; 
}

.mar_left {
	margin: 0 0 0 25%;
}

Vue

new Vue({
  el: "#app",  
  data: {
   		seen: false,
			seen_2: false,		
			title: '',
			desc: '',
			grNum: '',			
			groups: [
				{name: 'Группа-1', arr: []},
				{name: 'Группа-2', arr: []},
				{name: 'Группа-3', arr: []}
			]
  },  
  methods: {
      projectList(group) {
        this.seen = true;			
        this.grNum = group;			
      },
      
      addProject() {
        if(this.title !== '' && this.desc !== '') {
          var obj = {};
          obj.title = this.title;
          obj.desc = this.desc;
          this.grNum.arr.push(obj);
          this.seen_2 = true;
          this.title = '';
          this.desc = '';
        }
      }
    }  
})