SHARE
TWEET

Home.vue - Stage 4.2.3

dwadedev Mar 17th, 2019 (edited) 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="home">
  3.     <img alt="Vue logo" src="@/assets/logo.png" id="vue-logo">
  4.     <div class="title">What do I need to do today?</div>
  5.     <input v-model="myTodo" /><button @click="addToDo">Add</button>
  6.     <div v-if="errors !== ''" id="errors">{{ errors }}</div>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. import { db } from '@/main'
  12.  
  13. export default {
  14.   name: 'Home',
  15.   data: function () {
  16.     return {
  17.       myTodo: '',
  18.       errors: ''
  19.     }
  20.   },
  21.   methods: {
  22.     addToDo: function () {
  23.       this.errors = ''
  24.  
  25.       if (this.myTodo !== '') {
  26.         db.collection('items').add({
  27.           title: this.myTodo,
  28.           created_at: Date.now()
  29.         }).then((response) => {
  30.           if (response) {
  31.             this.myTodo = ''
  32.           }
  33.         }).catch((error) => {
  34.           this.errors = error
  35.         })
  36.       } else {
  37.         this.errors = 'Please enter some text'
  38.       }
  39.     }
  40.   }
  41. }
  42. </script>
  43.  
  44. <style>
  45. * {
  46.   box-sizing:border-box;
  47. }
  48.  
  49. body, html, #app {
  50.   background:#8ac8e5;
  51. }
  52.  
  53. .home {
  54.   width:300px;
  55.   margin:auto;
  56. }
  57.  
  58. #vue-logo {
  59.   width:100px;
  60. }
  61.  
  62. input, button {
  63.   border:0;
  64.   width:100%;
  65.   margin:0 0 10px;
  66.   padding:7px;
  67. }
  68.  
  69. input {
  70.   font-size:12px;
  71. }
  72.  
  73. button {
  74.   background:#43b823;
  75.   border:0;
  76.   text-transform:uppercase;
  77.   color:#fff;
  78.   font-weight:700;
  79.   cursor:pointer;
  80. }
  81.  
  82. .title {
  83.   font-size:14px;
  84.   font-weight:700;
  85.   padding:0 0 10px 0;
  86.   margin:0 0 10px 0;
  87.   border-bottom:1px solid #666;
  88. }
  89.  
  90. #errors {
  91.   background:#a52222;
  92.   color:#fff;
  93.   padding:5px;
  94. }
  95. </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