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>