vuejs treeselect - отложенная загрузка не работает через действие vuex - PullRequest
0 голосов
/ 05 октября 2019

Использование 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);
      });
    }
  }
});

Любая помощь приветствуется.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...