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。（一旦添加了this.eventAggregator.GetEvent<DrawRectEvent>().Subscribe(DrawRectEventHandler);，就会在Vue doc）

之前处理一个以内部元素为目标的事件，然后由该元素处理。

您可以使用.capture

准确了解哪个元素已被点击

e.g。

$event.target

在https://codesandbox.io/s/nkwk2k095l

中的HelloWorld.vue组件上测试

如何在vue-js中创建一个树视图，可点击的组件打开一个vue-js模式？

1 个答案: