VueJS - Practise

Let's do it...

by Nenad Novakovic

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<div id="app" class="container">
  <form @submit.prevent="submitForm">
    <div class="form-group">
      <input 
        type="text"
        class="form-control"
        placeholder="Username"
        v-model.lazy="user.username"
      />
    </div>

    <div class="form-group">
      <input 
        type="text"
        class="form-control"
        placeholder="E-mail"
        v-model.lazy="user.email"
      />
    </div>

    <button
       type="submit"
       class="btn btn-primary">
       Submit
    </button>
  </form>
  
  <button 
    type="button" 
    class="btn btn-warning"
    @click="fetchDatabase">
    Get Data from Database
  </button>
  
  <ul class="list-group mt-5" v-if="users.length > 0">
    <li 
      class="list-group-item"
      v-for="user in users">
        {{ user.username }} - {{ user.email }}
    </li>
  </ul>
</div>

CSS

#app {
  margin-top: 45px;
}

JavaScript

Vue.prototype.$http = axios

const firebase = 'https://vue-js-learning-108da.firebaseio.com/data.json'

new Vue({
  el: '#app',
  
  data: {
  	user: {
    	username: '',
      email: ''
    },
    users: []
  },
  
  methods: {
  	submitForm () {
    	this.$http.post(firebase, this.user)
      	.then(response => console.log(response))
    },
    
    fetchDatabase () {
    	this.$http.get(firebase)
      	.then(response => {
					this.users = Object.values(response.data)
        })
    }
  }
})