Skip to content

Commit 71819f8

Browse files
posvaposva
committed
docs: add rtdb example
1 parent 8dcf8ef commit 71819f8

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎examples/vue-2/rtdb.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>VueFire Todo App Demo</title>
6+
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase.js"></script>
7+
<script src="https://unpkg.com/vue@2"></script>
8+
<script src="https://unpkg.com/@vue/composition-api"></script>
9+
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
10+
<script src="../../dist/vuefire.global-vue-2.js"></script>
11+
</head>
12+
<body>
13+
<!--
14+
Before running this example, make sure to:
15+
16+
1. cd path/to/vuefire
17+
2. npm install
18+
3. npm run build
19+
20+
Then you can open this file in your browser.
21+
If you just prefer to see this example with
22+
the latest published version of VueFire, you
23+
play with the code in this fiddle:
24+
25+
https://jsfiddle.net/posva/wtyop5jy/
26+
-->
27+
28+
<div id="app">
29+
<input
30+
v-model.trim="newTodoText"
31+
@keyup.enter="addTodo"
32+
placeholder="Add new todo"
33+
/>
34+
<ul>
35+
<li v-for="todo in todos">
36+
<input
37+
:value="todo.text"
38+
@input="updateTodoText(todo, $event.target.value)"
39+
/>
40+
<button @click="removeTodo(todo)">X</button>
41+
</li>
42+
</ul>
43+
</div>
44+
45+
<script>
46+
let db = firebase
47+
.initializeApp({
48+
databaseURL: 'https://vuefiredemo.firebaseio.com',
49+
})
50+
.database()
51+
let todosRef = db.ref('todos')
52+
53+
const OptionsAPI = {
54+
data: () => ({
55+
newTodoText: '',
56+
todos: [],
57+
}),
58+
firebase: {
59+
todos: todosRef.limitToLast(25),
60+
},
61+
methods: {
62+
addTodo: function () {
63+
if (this.newTodoText) {
64+
todosRef.push({
65+
text: this.newTodoText,
66+
})
67+
this.newTodoText = ''
68+
}
69+
},
70+
updateTodoText: function (todo, newText) {
71+
todosRef.child(todo['.key']).child('text').set(newText)
72+
},
73+
removeTodo: function (todo) {
74+
todosRef.child(todo['.key']).remove()
75+
},
76+
},
77+
}
78+
79+
const CompositionAPI = {
80+
setup() {
81+
const newTodoText = VueDemi.ref('')
82+
const todos = VueDemi.ref([])
83+
84+
Vuefire.rtdbBind(todos, todosRef.limitToLast(25))
85+
86+
function addTodo() {
87+
if (newTodoText.value) {
88+
todosRef.push({
89+
text: newTodoText.value,
90+
})
91+
newTodoText.value = ''
92+
}
93+
}
94+
function updateTodoText(todo, newText) {
95+
todosRef.child(todo['.key']).child('text').set(newText)
96+
}
97+
98+
function removeTodo(todo) {
99+
todosRef.child(todo['.key']).remove()
100+
}
101+
102+
return { newTodoText, todos, addTodo, updateTodoText, removeTodo }
103+
},
104+
}
105+
106+
const OptionAPI = {
107+
data: () => ({
108+
newTodoText: '',
109+
todos: [],
110+
}),
111+
112+
firebase() {
113+
return {
114+
todos: todosRef.limitToLast(25),
115+
}
116+
},
117+
118+
methods: {
119+
addTodo() {
120+
if (this.newTodoText) {
121+
todosRef.push({
122+
text: this.newTodoText,
123+
})
124+
this.newTodoText = ''
125+
}
126+
},
127+
128+
updateTodoText(todo, newText) {
129+
todosRef.child(todo['.key']).child('text').set(newText)
130+
},
131+
132+
removeTodo(todo) {
133+
todosRef.child(todo['.key']).remove()
134+
},
135+
},
136+
}
137+
138+
let params = new URLSearchParams(location.search)
139+
140+
Vue.use(Vuefire.rtdbPlugin, { wait: true })
141+
142+
let vm = VueDemi.createApp(
143+
params.get('composition') != null ? CompositionAPI : OptionAPI
144+
).mount('#app')
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)