如何使用可点击的组件创建vue-js中的树状视图，打开vue-js模式？

Question

我想在Vue-JS中创建一个树视图组件来显示我的JSON数据。但是，我还需要在单击JSON视图的任何数据字段时启动一个VueJS模型。我查看了几个npm modules，它们确实在树形视图中显示数据，但我不知道如何修改它们，使它们可点击并启动vue-js modal。这是我目前用来显示树视图的代码，但是没有一个字段是可点击的。

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/>'
})

有什么想法吗？

更新：我尝试过雅各布的答案，但这并没有帮助我启动模式。我试过这个：

<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("The console message",$event.target);
  this.$modal.show(GroupModal,
  {
      draggable: true,
      resizable: true,
      scrollable: true,
      height: "auto",
      width:"50%"
    })
}
 }
}
</script>
<style>
</style> 

Answer 1

好吧..。div容器可以为您工作。

使用@click.capture。(一旦添加了.capture，这里就会处理针对内部元素的事件，然后由该元素从Vue doc处理)

通过使用$event.target，您可以准确地获得单击了哪个元素。

例如：

<template>
  <div @click.capture="openGroupModal($event)">
    <tree-view :data="{1:1,2:{a:'a'}}" :options="{maxDepth: 3}"></tree-view>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods:{
    openGroupModal($event){
      console.log($event.target);
      // other codes for showing modal and etc...
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

在HelloWorld.vue组件上进行https://codesandbox.io/s/nkwk2k095l测试