VUE2树选择AJAX调用无法加载选项

Question

我正在尝试使用此库以树的形式获取动态输入元素https://riophae.github.io/vue-treeselect/#basic-features

我的选择将通过Ajax呼叫Laravel后端生成。

我的vue2组件代码是这样的，

<template lang="html">
  <div>
    <div class="" >
      <treeselect :multiple="true"  :options="options"   :flat="true" :sort-value-by="sortValueBy"  :default-expand-level="1"
      placeholder="Try selecting some options."        v-model="value"   />
      <pre class="result">{{ value }}</pre>
    </div>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
function tests(id) {
  var data = [];
  axios.get('/standards/' + id + '/tests')
    .then(function(response) {
      data: response.data;
    });
  return data;
}
let called = false
export default {
  components: {
    Treeselect,
  },
  data() {
    return {
      value: null,
      options: tests(1)
      sortValueBy: 'ORDER_SELECTED',
    }
  },
  methods: {
    loadRootOptions(callback) {
      axios.get('/standards/1/tests')
        .then(response => rootOptions = response.data);
    },
  },
}
</script>
<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>

laravel后端就像这个

public function tests($id)
    {
        $tests = [['id'=>'a','label'=>'sandeep'],['id'=>'b','label'=>'sandeep']];
        return $tests;
    }

后端的JSON响应是正确的。问题在于使用此树选择库通过AJAX调用动态加载选项。

请帮助使用适当的代码，因为我是新手使用VUE。

Answer 1

如果您仍然需要帮助，则不确定是否在8个月前可用。所有这些代码均可在https://vue-treeselect.js.org/#delayed-loading

上获得

  <treeselect
        v-model="value"
        :options="options"
        :load-options="loadOptions"
        :auto-load-root-options="false"
        :multiple="true"
        placeholder="Open the menu..."
    />

 import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
 import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

然后在方法中添加Loadoptions

        loadOptions({ action, parentNode, callback }) {
            if (action === LOAD_CHILDREN_OPTIONS) {
                        parentNode.children = [ {
                            id: 'child',
                            label: 'Child option',
                        } ]
                        callback()
            }
            if (action === LOAD_ROOT_OPTIONS) {
                this.options =  [ 'a', 'b', 'c', 'd', 'e' ].map(id => ({
                    id,
                    label: `option-${id}`,
                }));
                callback();
            }
        },