Использование Vue TreeSelect Plugin для загрузки вложенного списка узлов из бэкэнда Firebase. На странице документа написано:
Также возможно иметь опции корневого уровня для отложенной загрузки. Если изначально не было зарегистрировано ни одного параметра (options: null), vue-treeselect попытается загрузить корневые параметры, вызвав loadOptions ({action, callback, instanceId}).
loadOptions
(в моемApp.vue) отправляет vuex action_FolderNodesList
, извлекает (из firebase) форматы (как того требует vue-treeselect) и изменяет состояние folder_NodesList
, затем пытается обновить параметры this.options = this.get_FolderNodesList
, но, похоже, это не работает.
Вот метод loadOptions
(в app.vue)
loadOptions() {
let getFolderListPromise = this.$store.dispatch("action_FolderNodesList");
getFolderListPromise.then(_ => {
this.options = this.get_FolderNodesList;
});
}
Vue ошибки из Invalid prop: type check failed for prop "options". Expected Array, got String with value ""
Я не уверен, что я делаю неправильнопочему это не работает. Работающий Codesandbox демо
Источник
App.vue
<code><template>
<div class="section">
<div class="columns">
<div class="column is-7">
<div class="field">
<Treeselect
:multiple="true"
:options="options"
:load-options="loadOptions"
:auto-load-root-options="false"
placeholder="Select your favourite(s)..."
v-model="value" />
<pre>{{ get_FolderNodesList }}
import {mapGetters} из "vuex";импортировать Treeselect из "@ riophae / vue-treeselect";import "@ riophae / vue-treeselect / dist / vue-treeselect.css";экспорт по умолчанию {data () {return {value: null, options: null, named: false};}, components: {Treeselect}, computed: mapGetters (["get_FolderNodesList"]), методы: {loadOptions () {let getFolderListPromise = this. $ store.dispatch ("action_FolderNodesList");getFolderListPromise.then (_ => {this.options = this.get_FolderNodesList;});}}};
Store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
folder_NodesList: ""
},
getters: {
get_FolderNodesList(state) {
return state.folder_NodesList;
}
},
mutations: {
mutate_FolderNodesList(state, payload) {
state.folder_NodesList = payload;
}
},
actions: {
action_FolderNodesList({ commit }) {
fmRef.once("value", snap => {
var testObj = snap.val();
var result = Object.keys(testObj).reduce((acc, cur) => {
acc.push({
id: cur,
label: cur,
children: recurseList(testObj[cur])
});
return acc;
}, []);
commit("mutate_FolderNodesList", result);
});
}
}
});
Любая помощь приветствуется.
Спасибо