1

como hago para mostrar una lista en este caso dataItems en formato JSON. Necesito mostrar un lista que se edita en el DOM y no la que ya este almacenada en la base de datos.

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>
            Nuevo Treeno
        </button>
        <vue-tree-list 
        @click="onClick" 
        :model="dataItems" 
        v-model="dataModel"
        default-tree-node-name="new node" 
        default-leaf-node-name="new leaf">
        </vue-tree-list>
    </div>
<div> {{ dataModel }}</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.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:{},
            dataModel:[],
            data: 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 = new VueTreeList.Tree(response.data);
              dev.dataModel = response.json();
              console.log(Object.keys(dev.dataItems).length)

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


      }
    </script>

1 respuesta 1

0

Les dejo la solcion por alguno le interesa:

MostrarJSON: 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.dataItems)
              }

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.