SHARE
TWEET

Home.vue - Complete

dwadedev Mar 17th, 2019 84 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.  
  8.     <div v-if="this.$store.getters.getItems && this.$store.getters.getItems.length > 0">
  9.       <div class="title">Today, you've go to do...</div>
  10.  
  11.      <div v-for="item in this.$store.getters.getItems" :key="item.id">
  12.        {{ item.title }}<br /><br /><small style="text-decoration:underline;" @click="deleteItem(item.id)">Delete</small>
  13.        <hr />
  14.      </div>
  15.    </div>
  16.  </div>
  17. </template>
  18.  
  19. <script>
  20. import { db } from '@/main'
  21.  
  22. export default {
  23.  name: 'Home',
  24.  beforeCreate: function () {
  25.    this.$store.dispatch('setItems')
  26.  },
  27.  data: function () {
  28.    return {
  29.      myTodo: '',
  30.      errors: ''
  31.    }
  32.  },
  33.  methods: {
  34.    addToDo: function () {
  35.      this.errors = ''
  36.  
  37.      if (this.myTodo !== '') {
  38.        db.collection('items').add({
  39.          title: this.myTodo,
  40.          created_at: Date.now()
  41.        }).then((response) => {
  42.          if (response) {
  43.            this.myTodo = ''
  44.          }
  45.        }).catch((error) => {
  46.          this.errors = error
  47.        })
  48.      } else {
  49.        this.errors = 'Please enter some text'
  50.      }
  51.    },
  52.    deleteItem: function (id) {
  53.      if (id) {
  54.        db.collection("items").doc(id).delete().then(function() {
  55.            console.log("Document successfully deleted!");
  56.        }).catch(function(error) {
  57.            this.errors = error
  58.        })
  59.      } else {
  60.        this.error = 'Invalid ID'
  61.      }
  62.    }
  63.  }
  64. }
  65. </script>
  66.  
  67. <style>
  68. * {
  69.  box-sizing:border-box;
  70. }
  71.  
  72. body, html, #app {
  73.  background:#8ac8e5;
  74. }
  75.  
  76. .home {
  77.  width:300px;
  78.  margin:auto;
  79. }
  80.  
  81. #vue-logo {
  82.  width:100px;
  83. }
  84.  
  85. input, button {
  86.  border:0;
  87.  width:100%;
  88.  margin:0 0 10px;
  89.  padding:7px;
  90. }
  91.  
  92. input {
  93.  font-size:12px;
  94. }
  95.  
  96. button {
  97.  background:#43b823;
  98.  border:0;
  99.  text-transform:uppercase;
  100.  color:#fff;
  101.  font-weight:700;
  102.  cursor:pointer;
  103. }
  104.  
  105. .title {
  106.  font-size:14px;
  107.  font-weight:700;
  108.  padding:0 0 10px 0;
  109.  margin:0 0 10px 0;
  110.  border-bottom:1px solid #666;
  111. }
  112.  
  113. #errors {
  114.  background:#a52222;
  115.  color:#fff;
  116.  padding:5px;
  117. }
  118. </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