app.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  2. // Setup Firebase
  3. var config = {
  4. apiKey: "AIzaSyAi_yuJciPXLFr_PYPeU3eTvtXf8jbJ8zw",
  5. authDomain: "vue-demo-537e6.firebaseapp.com",
  6. databaseURL: "https://vue-demo-537e6.firebaseio.com"
  7. }
  8. firebase.initializeApp(config)
  9. var usersRef = firebase.database().ref('users')
  10. // create Vue app
  11. var app = new Vue({
  12. // element to mount to
  13. el: '#app',
  14. // initial data
  15. data: {
  16. newUser: {
  17. name: '',
  18. email: ''
  19. }
  20. },
  21. // firebase binding
  22. // https://github.com/vuejs/vuefire
  23. firebase: {
  24. users: usersRef
  25. },
  26. // computed property for form validation state
  27. computed: {
  28. validation: function () {
  29. return {
  30. name: !!this.newUser.name.trim(),
  31. email: emailRE.test(this.newUser.email)
  32. }
  33. },
  34. isValid: function () {
  35. var validation = this.validation
  36. return Object.keys(validation).every(function (key) {
  37. return validation[key]
  38. })
  39. }
  40. },
  41. // methods
  42. methods: {
  43. addUser: function () {
  44. if (this.isValid) {
  45. usersRef.push(this.newUser)
  46. this.newUser.name = ''
  47. this.newUser.email = ''
  48. }
  49. },
  50. removeUser: function (user) {
  51. usersRef.child(user['.key']).remove()
  52. }
  53. }
  54. })