I have a unique requirement to implement a tree-view feature in Vue-JS for displaying JSON data. However, I need to enhance this by triggering a VueJS modal when any of the data fields in the JSON view are clicked. I have explored various npm modules that offer tree-view functionalities but I am uncertain about how to customize them to enable clickable fields and launch a vue-js modal. Below is my current code snippet for rendering the tree-view, which unfortunately does not support click functionality on the fields.
assets.vue
<template>
<div>
<h1>The Assets Page</h1>
<!--<p>{{response}}</p>-->
<tree-view v-on:click="openGroupModal()" :data="response._embedded.assets" :options="{maxDepth: 0, rootObjectKey: 'Assets'}"></tree-view>
</div>
</template>
<script>
import axios from 'axios'
import GroupModal from '../assets/assetdetails.vue'
import Vue from 'vue'
import VModal from 'vue-js-modal'
Vue.use(VModal, { dynamic: true })
export default {
name: 'service',
data () {
return {
response: [],
errors: []
}
},
created () {
this.callRestService()
},
methods: {
callRestService () {
axios.get('http://localhost:8080/rest/assets')
.then(response => {
// JSON responses are automatically parsed.
this.response = response.data
})
.catch(e => {
this.errors.push(e)
})
},
openGroupModal(){
this.$modal.show(GroupModal,
{
draggable: true,
resizable: true,
scrollable: true,
height: "auto",
width:"50%"
})
}
}
}
</script>
<style>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import VModal from 'vue-js-modal'
import App from './App.vue'
import TreeView from 'vue-json-tree-view'
import { routes } from './routes';
Vue.use(VueRouter);
Vue.use(VModal, { dynamic: true })
Vue.use(TreeView)
//Vue.config.productionTip = false
const router = new VueRouter({
routes
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Any suggestions?
UPDATE: I implemented Jacob's suggestion but it did not help me with launching the modal. Here is what I tried:
<template>
<div>
<h1>The Assets Page</h1>
<!--<p>{{response}}</p>-->
<div @click.capture="openGroupModal($event)">
<tree-view :data="response._embedded.assets" :options="{maxDepth: 0, rootObjectKey: 'Assets'}"></tree-view>
</div>
</div>
</template>
<script>
import axios from 'axios'
import GroupModal from '../assets/assetdetails.vue'
import Vue from 'vue'
import VModal from 'vue-js-modal'
Vue.use(VModal, { dynamic: true })
export default {
name: 'service',
data () {
return {
response: [],
errors: []
}
},
created () {
this.callRestService()
},
methods: {
callRestService () {
axios.get('http://localhost:8080/rest/assets')
.then(response => {
// JSON responses are automatically parsed.
this.response = response.data
})
.catch(e => {
this.errors.push(e)
})
},
openGroupModal($event){
console.log("Print message on the console",$event.target);
this.$modal.show(GroupModal,
{
draggable: true,
resizable: true,
scrollable: true,
height: "auto",
width:"50%"
})
}
}
}
</script>
<style>
</style>