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>
dev.dataItems = new VueTreeList.Tree(response.data)
?