vuejs树选择-延迟加载不能通过vuex操作工作。

Question

使用Vue TreeSelect插件从防火墙后端加载一个嵌套的节点列表。佩奇医生说，

还可以使用根级选项来延迟加载。如果最初没有注册选项(选项: null)，vue-treeselect将尝试通过调用loadOptions({ action、回调、instanceId })加载根选项。

loadOptions (在我的App.vue中)调度vuex action_FolderNodesList，获取(从火基)格式(按照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错误

我不知道我做错了什么，为什么不起作用。一种工作的码箱演示

来源

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

任何帮助都是非常感谢的。

谢谢

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

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