Я пытаюсь перенастроить клон Vue.js Workflowy для хранения элементов списка с помощью Firebase. Клон основан на следующем репо: https://github.com/9diov/myflowy. Это репо позволяет организовать элементы списка в дерево списка. Элементы списка можно смещать влево и вправо, чтобы определить их связь с родительскими элементами списка. Мне удалось реализовать функцию addItem, которая добавляет элементы списка и их уровни в Firebase. Сейчас я пытаюсь реализовать метод, который извлекает элементы из базы данных и возвращает их в шаблон. До сих пор мне удавалось настроить хук жизненного цикла beforeCreate(), чтобы получать значения и уровни элементов списка и помещать их в массив списков. Я добавил console.log(this.list), чтобы подтвердить, что данные добавляются в массив. Однако значения списка и их уровни не отображаются на экране. Как я могу beforeCreate() перехватить, чтобы вернуть value и level, хранящиеся в Firebase, в список дерева?
Вот мой компонент:
<template>
<div id="app">
<span>{{ msg }}</span>
<ul>
<li v-for="(item, index) in list"
v-bind:class="item.level">
<span>•</span>
<input
v-model="item.value"
@keydown.down.prevent="moveDown"
@keydown.up.prevent="moveUp"
@keydown.tab.prevent="shiftRight(index, $event)"
@keydown.shift.tab.prevent="shiftLeft(index, $event)"
@keydown.enter.prevent="addItem(index)"
v-focus="index === focused"
@focus="focused = index"
@blur="focused = null">
</li>
</ul>
</div>
</template>
<script>
import { fblist } from './firebase'
import { focus } from 'vue-focus';
import Vue from 'vue';
const MAX_LEVEL = 10;
export default {
name: 'app',
directives: { focus: focus },
data () {
return {
msg: 'Welcome to Your Vue.js App',
list: [
{ value: 'new item', level: 0 }
],
focused: null
}
},
async created () {
let snapshot = await fblist.get()
const list = []
snapshot.forEach(doc => {
let appData = doc.data()
appData.id = doc.id
// this.list.push(appData)
this.list.push({ value: appData.value, level: appData.level })
console.log(this.list)
})
this.list = list
},
methods: {
moveDown: function() {
this.focused = Math.min(this.focused + 1, this.list.length - 1);
},
moveUp: function () {
this.focused = Math.max(this.focused - 1, 0);
},
shiftLeft: function (index, event) {
let self = this;
self.list[index].level = Math.max(self.list[index].level - 1, 0);
},
shiftRight: function (index, event) {
if (event.shiftKey)
return;
if (index === 0) return;
this.list[index].level = Math.min(this.list[index].level + 1, this.list[index - 1].level + 1, MAX_LEVEL);
},
async addItem (index) {
this.list.splice(index + 1, 0, {value: '', level: this.list[index].level});
this.focused = index + 1;
await fblist.add({
listItem: this.list
})
// this.getData()
}
}
}
</script>
созданный () хук
async created () {
let snapshot = await fblist.get()
const list = []
snapshot.forEach(doc => {
let appData = doc.data()
appData.id = doc.id
this.list.push({ value: appData.value, level: appData.level })
console.log(list)
})
this.list = list
},