JSFiddle - React, Tailwind, and code Playground

by IronP

HTML

<html>
  <head>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@%5E0.4.0/dist/vue-treeselect.umd.js"></script>
  </head>
  <body>
    <div id="app">
      <treeselect
        v-model="geoLocal"
        :load-options="loadOptions"
        :options="regionsRoot"
        :normalizer="normalizer"
        :multiple="true"
        :is-default-expanded="true"
      />
    </div>
   </body>

Vue

Vue.component('treeselect', Treeselect);

new Vue({
  el: '#app',
  data: {
  geoLocal: '',
  	regionsRoot: [
    	{
      children:[
      {
        isLazy: false,
        key: "2900",
        parent_id: "0",
        title: "Kosovo",
      },
      {
        isLazy: true,
        key: "2036",
        parent_id: "0",
        title: "Австралия",
      },
      {
        isLazy: true,
        key:"2040",
        parent_id:"0",
        title:"Австрия",
      },
      ],
      expand: true,
			key: "0",
			parent_id: 0,
			title: "Вcе",
      }
    ],
    loadingText: 'Загрузка...',
    place: 'Введите название региона...',
    noResults: 'Не найдено такого региона',
    normalizer(node) {
      return {
        id: node.key,
        label: node.title,
      };
    },
  },
  mounted() {
   this.regionsRoot[0].children.map((obj) => {
     obj.children = null;
     return obj;
   });
  },
  methods: {
    loadOptions({ action, parentNode, callback }) {
    console.log(parentNode);
    if (action === LOAD_CHILDREN_OPTIONS) {
      axios('/google_regions/?node=' + parentNode.key, {
        method: 'GET',
      })
        .then((data) => {
          console.log(data);
          parentNode.children = data.data;
          console.log(parentNode.children);
          callback();
      })
        .catch((error) => {
          callback(new Error('Failed to load options: network error.'));
        });
    }
  }
}
})