SHARE
TWEET

vue

a guest Sep 17th, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="container" id="app">
  3.  
  4.     <div class="row justify-content-md-center">
  5.       <div class="col-md-5 col-12 ">
  6.      
  7.     <Formulario @cadastrar="cadastro" titulo="Cadastro de tarefas">
  8.       <template v-slot:header>
  9.         <h1>Cadastro de tarefas 2</h1>
  10.         <h6>Digite o nome da tarefa</h6>
  11.       </template>
  12.  
  13.       <template v-slot:footer>
  14.         <hr />
  15.       </template>
  16.     </Formulario>
  17.  
  18.       </div>
  19.     </div>
  20.  
  21.     <div class="row mt-5">
  22.         <div class="col-12">
  23.           <Listagem titulo="Lista de Tarefas" v-bind:lista="tarefas" @destruir="excluirTarefa" @concluido="concluido"></Listagem>
  24.         </div>
  25.     </div>
  26.  
  27.   </div>
  28. </template>
  29.  
  30. <script>
  31. //import HelloWorld from './components/HelloWorld.vue'
  32. import Formulario from './components/Formulario.vue'
  33. import Listagem from './components/Listagem.vue'
  34. import axios from 'axios';
  35.  
  36. export default {
  37.   name: 'app',
  38.   components: {
  39.     Formulario,
  40.     Listagem
  41.   },
  42.   data: function() {
  43.     return {
  44.       tarefas: []
  45.     };
  46.   },
  47.   created: function() {
  48.     this.atualizarLista();
  49.   },
  50.   methods: {
  51.     cadastro: function(paramTarefa) {
  52.       //this.tarefas.push({ tarefa: paramTarefa,
  53.       //  isConcluido: false });
  54.  
  55.       var _this = this;
  56.       axios.put('http://eyglys.com.br/apitodo/todo/create',{
  57.         todo: paramTarefa
  58.       }).then(function(resposta) {
  59.         _this.atualizarLista();
  60.       });
  61.  
  62.       // console.log(this.tarefas);
  63.     },
  64.     excluirTarefa: function(index) {
  65.       //this.tarefas.splice(index,1);
  66.       var _this = this;
  67.       axios.delete('http://eyglys.com.br/apitodo/todo/delete?id='+index).then(function(resposta) {
  68.         _this.atualizarLista();
  69.        });
  70.     },
  71.  
  72.     atualizarLista: function() {
  73.       var _this = this;
  74.       axios.get('http://eyglys.com.br/apitodo/todo?per-page=100').then(function(resposta) {
  75.         _this.tarefas = resposta.data.map(function(obj) {
  76.             return { tarefa: obj.todo, isConcluido: obj.finished, id: obj.id };
  77.          });
  78.        });
  79.     },
  80.  
  81.     concluido: function(obj) {
  82.       var _this = this;
  83.       axios.put('http://eyglys.com.br/apitodo/todo/update?id='+obj.id,
  84.       {
  85.         finished: obj.isConcluido
  86.       }).then(function(response) {
  87.         //console.log(response);
  88.         _this.atualizarLista();
  89.       });
  90.     }
  91.   }
  92. }
  93. </script>
  94.  
  95. <style>
  96. #app {
  97.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  98.   -webkit-font-smoothing: antialiased;
  99.   -moz-osx-font-smoothing: grayscale;
  100.   text-align: center;
  101.   color: #2c3e50;
  102.   margin-top: 60px;
  103. }
  104. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top