0

Estimados tengo un problema que me esta volando la cabeza. Alguien me puede decir como extraer datos de un archivo json con axios de esta libreria. Ejemplo: TreeView Vuejs

Cuando le coloco a data: new Tree([]) un result de axios, me dice este error:

[Vue warn]: Invalid prop: type check failed for prop "model". Expected Object, got Array 

Script completo:

<template>
  <div >
   <div class="container">
        <button class="button is-primary is-small" @click="addNode">
            <span class="icon is-small" style="margin-right: 2px;">
                <i class="fa fa-plus-circle"></i>
            </span>
            New Treeno
        </button>
        <vue-tree-list 
        @click="onClick" 
        :model="dataItems" 
        default-tree-node-name="new node" 
        default-leaf-node-name="new leaf">
        </vue-tree-list>
    </div>

    <div class="container">
      <div class="has-text-centered" style="margin-bottom: 1rem">
        <button class="button is-primary" type="button" name="button" @click="getNewTree">Get New Tree</button>
      </div>
      <pre>
        {{newTree}}
      </pre>
    </div>
  </div>
</template>



    <script>

    window.VueTreeList = require('../../../public/js/dist/vue-tree-list.min.js')


      function isMobile() {
        var sUserAgent = navigator.userAgent.toLowerCase();

        var bIsIpad = /ipad/i.test(sUserAgent);
        var bIsIphoneOs = /iphone os/i.test(sUserAgent);
        var bIsMidp = /midp/i.test(sUserAgent);
        var bIsUc7 = /rv:1.2.3.4/i.test(sUserAgent);
        var bIsUc = /ucweb/i.test(sUserAgent);
        var bIsAndroid = /android/i.test(sUserAgent);
        var bIsCE = /windows ce/i.test(sUserAgent);
        var bIsWM = /windows mobile/i.test(sUserAgent);
        var bIsWx = /MicroMessenger/i.test(sUserAgent);
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || bIsWx) {
          return true;
        }
        return false;
      }

    export default {
      props:{

      },
        components: {
          'VueTreeList': VueTreeList.VueTreeList
        },
        data () {
          return {
            isMobile: isMobile(),
            record: null,
            newTree: {},
            dataItems:{},
            dato: new VueTreeList.Tree([
              {
                name: 'Node 13',
                id: 1,
                pid: 0,
                dragDisabled: true,
                children: [
                  {
                    name: 'Node 1-2',
                    id: 2,
                    isLeaf: false,
                    pid: 1
                  }
                ]
              },
              {
                name: 'Node 23',
                id: 3,
                pid: 0,
                disabled: true
              },
              {
                name: 'Node 34',
                id: 4,
                pid: 0
              }
            ])
          }
        },
        created: function(){
            this.getPlan();
        },
        methods: {
          getTreeChange: function () {
            this.record = Object.assign({}, VueTreeList.Record)
          },
          getPlan() {
          const dev = this;
          let uri = "http://localhost/software/program/public/datajson";
          axios
            .get(uri, {
              method: "GET",
              mode: "no-cors",
              headers: {
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json"
              },
              withCredentials: true,
              credentials: "same-origin"
            })
            .then(response => {
              dev.dataItems = response.data;
              console.log(Object.keys(dev.dataItems).length)

            });
        },
          addNode: function () {
            var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
            if (!this.data.children) this.data.children = []
            this.data.addChildren(node)
          },

          getNewTree: function () {
            var vm = this
            function _dfs (oldNode) {
              var newNode = {}

              for (var k in oldNode) {
                if (k !== 'children' && k !== 'parent') {
                  newNode[k] = oldNode[k]
                }
              }

              if (oldNode.children && oldNode.children.length > 0) {
                newNode.children = []
                for (var i = 0, len = oldNode.children.length; i < len; i++) {
                  newNode.children.push(_dfs(oldNode.children[i]))
                }
              }
              return newNode
            }

            vm.newTree = _dfs(vm.data)
          },

          onClick(model) {
            console.log(model)
          }
        }
      }
    </script>
2
  • 1
    Hola @Nahuel Jakobson, el mensaje que te manda quiere decir que tienes que poner en el atributo model un Objeto (supongo que del tipo Tree) pero tú estás enviando un array, por que no intentas poner en el then de tu request de axios lo siguiente dev.dataItems = new VueTreeList.Tree(response.data) ? Commented el 14 feb. 2019 a las 17:29
  • Gracias infinita @BernardoLezama!!! Esa fue la solucion. No se por que queria convertir en Objeto despues y no cuando sale de axios. Commented el 18 feb. 2019 a las 23:19

1 respuesta 1

0

Solucion:

dev.dataItems = new VueTreeList.Tree(response.data)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.