vuejs treeselect - 延迟加载不能通过 vuex 操作工作答案

【问题标题】：vuejs treeselect - delay loading does not work via vuex actionvuejs treeselect - 延迟加载不能通过 vuex 操作工作
【发布时间】：2019-10-05 14:31:33
【问题描述】：

使用 Vue TreeSelect Plugin 从 Firebase 后端加载嵌套的节点列表。它的文档页面说，

还可以延迟加载根级别选项。如果最初没有注册任何选项（选项：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;
      });
    }

Invalid prop: type check failed for prop "options". Expected Array, got String with value "" 出现 Vue 错误

我不确定我做错了什么，为什么这不起作用。一个工作的Codesandbox demo

来源

App.vue

<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 }}</pre>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    data() {
        return {
            value: null,
            options: null,
            called: false
        };
    },
    components: {
        Treeselect
    },
    computed: mapGetters(["get_FolderNodesList"]),

    methods: {
        loadOptions() {
            let getFolderListPromise = this.$store.dispatch("action_FolderNodesList");
            getFolderListPromise.then(_ => {
                this.options = this.get_FolderNodesList;
            });
        }
    }
};
</script>

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);
      });
    }
  }
});

感谢任何帮助。

谢谢

【问题讨论】：

这个问题你解决了吗？我一直在努力寻找使用 api 数据和树视图/选择的正确示例。

标签： vue.js asynchronous vuejs2 vuex

【解决方案1】：

您似乎正在调用this.options，这将更新整个元素，而仅应更新当前的扩展选项。

似乎loadOptions() 被调用了一些参数，您可以使用这些参数仅更新当前子节点。第一个参数似乎包含所有必需的资产，所以我这样编写了 loadTreeOptions 函数：

loadTreeOptions(node) {
            // On initial load, I set the 'children' to NULL for nodes to contain children
            // but inserted an 'action' string with an URL to retrieve the children
            axios.get(node.parentNode.action).then(response => {
                // Update current node's children
                node.parentNode.children = response.data.children;
                // notify tree to update structure
                node.callback();
            }).catch(
                errors => this.onFail(errors.response.data)
            );
        },

然后我在页面上的<vue-treeselect> 元素上设置:load-options="loadTreeOptions"。也许您只是错过了更新结构的callback() 调用。我的安装似乎比你的简单，但现在可以正常工作了。

【讨论】：