SHARE
TWEET

Untitled

a guest Mar 22nd, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <v-container grid-list-xl>
  3.         <v-layout row wrap>
  4.  
  5.             <v-flex md6>
  6.  
  7.  
  8.                 <v-card class="mb-3" v-for="(item, index) in listaTareas" :key="index">
  9.                     <v-card-text>
  10.                         <v-chip label color="pink" text-color="white" class="ml-0">
  11.                             <v-icon left>label</v-icon>
  12.                             {{item.titulo}}
  13.                         </v-chip>
  14.                         <p>{{item.desc}}</p>
  15.                         <v-btn color="warning" class="ml-0" @click="editar(index)">Editar</v-btn>
  16.                         <v-btn color="error" class="ml-0" @click="eliminarTarea(item.id)">Eliminiar</v-btn>
  17.                     </v-card-text>
  18.                 </v-card>
  19.  
  20.             </v-flex>
  21.  
  22.             <v-flex md6 v-if="formAgregar">
  23.                 <v-card class="mb-3 pa-3">
  24.                     <v-form @submit.prevent="agregarTarea">
  25.                         <v-text-field label="Titulo de la tarea" v-model="titulo"></v-text-field>
  26.                         <v-textarea label="DescripciĆ³n de la tarea" v-model="desc"></v-textarea>
  27.                         <v-btn block color="success" type="submit">Agregar Tarea</v-btn>
  28.                     </v-form>
  29.                 </v-card>
  30.             </v-flex>
  31.  
  32.             <v-flex md6 v-if="!formAgregar">
  33.                 <v-card class="mb-3 pa-3">
  34.                     <v-form @submit.prevent="editarTarea">
  35.                         <v-text-field label="Titulo de la tarea" v-model="titulo"></v-text-field>
  36.                         <v-textarea label="DescripciĆ³n de la tarea" v-model="desc"></v-textarea>
  37.                         <v-btn block color="warning" type="submit">Editar Tarea</v-btn>
  38.                     </v-form>
  39.                 </v-card>
  40.             </v-flex>
  41.  
  42.         </v-layout>
  43.  
  44.         <v-snackbar
  45.             v-model="snackbar"
  46.         >
  47.             {{ mensaje }}
  48.         <v-btn
  49.             color="pink"
  50.             flat @click="snackbar = false"
  51.         >
  52.                 Close
  53.             </v-btn>
  54.         </v-snackbar>
  55.  
  56.     </v-container>
  57. </template>
  58.  
  59. <script>
  60.     export default {
  61.         data() {
  62.             return {
  63.                 listaTareas: [{
  64.                         id: 1,
  65.                         titulo: 'Titulo Tarea #1',
  66.                         desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, maiores?'
  67.                     },
  68.                     {
  69.                         id: 2,
  70.                         titulo: 'Titulo Tarea #2',
  71.                         desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, maiores?>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, maiores?'
  72.                     }
  73.                 ],
  74.                 titulo: '',
  75.                 desc: '',
  76.                 snackbar: false,
  77.                 mensaje: '',
  78.                 formAgregar: true,
  79.                 indexTarea: ''
  80.             }
  81.         },
  82.         methods: {
  83.             agregarTarea(){
  84.                 console.log(this.titulo, this.desc)
  85.                 if (this.titulo === '' || this.desc === '') {
  86.                     this.snackbar = true
  87.                     this.mensaje = 'Debes llenar todos los campos!'
  88.                 } else {
  89.                     this.listaTareas.push({
  90.                         id: Date.now(),
  91.                         titulo: this.titulo,
  92.                         desc: this.desc
  93.                     })
  94.                     this.titulo = ''
  95.                     this.desc = ''
  96.                     this.snackbar = true
  97.                     this.mensaje = 'Tarea Agregada con exito!'
  98.                 }
  99.             },
  100.             eliminarTarea(id){
  101.                 this.listaTareas = this.listaTareas.filter(e => e.id != id)
  102.             },
  103.             editar(index) {
  104.                 this.formAgregar = false
  105.                 this.titulo = this.listaTareas[index].titulo
  106.                 this.desc = this.listaTareas[index].desc
  107.                 this.indexTarea = index
  108.             },
  109.             editarTarea(){
  110.                 this.listaTareas[this.indexTarea].titulo = this.titulo
  111.                 this.listaTareas[this.indexTarea].desc = this.desc
  112.                 this.formAgregar = true
  113.                 this.titulo = ''
  114.                 this.desc = ''
  115.                 this.snackbar = true
  116.                 this.mensaje = 'Tarea editada con exito!'
  117.             }
  118.         }
  119.     }
  120. </script>
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