我想在 Vue-JS 中创建一个 TreeView 组件来显示我的 JSON 数据。但是我有一个额外的要求,我需要在单击 JSON View 的任何数据字段时启动 VueJS 模式。我查看了几个确实在 TreeView 中显示数据的 npm 模块
,但我不确定如何修改它们以使其可点击并启动 vue-js modal
。
这是我目前用来显示 TreeView 的代码,但没有一个字段是可点击的。
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/>'
})
有什么想法吗?
更新:我尝试了 Jacob 的回答,但这并没有帮助我启动模态。我试过这个:
<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>
最佳答案
嗯..一个 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>
在 https://codesandbox.io/s/nkwk2k095l 中的 HelloWorld.vue 组件上测试
关于javascript - 如何使用打开 vue-js 模式的可点击组件在 vue-js 中创建 TreeView ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49371571/