如何解决如何从本地JSON文件向Quasar树节点获取数据
我对Quasar还是很陌生,我想显示本地JSON文件中的Quasar树节点,并且单击特定的节点项后,我想显示一些文本。 到目前为止,我正在使用像这样的Quasar树。
<template>
<q-page class="flex fixed-left">
<q-tree
:nodes="simple"
node-key="label"
no-connectors
:expanded.sync="expanded"
text-color="blue"
></q-tree>
</q-page>
</template>
<style>
</style>
<script>
export default {
name: 'HelloWorld',data () {
return {
expanded: [ 'Resources' ],simple: [
{
label: 'Resources',children: [
{
label: 'Projects',children: [
{
label: 'Data sets',children: [
{
label: 'Items',}
]
},{ label: 'Good recipe' }
]
},{
label: 'Good service (disabled node with icon)',icon: 'room_service',disabled: true,children: [
{ label: 'Prompt attention' },{ label: 'Professional waiter' }
]
},{
label: 'Pleasant surroundings (with icon)',icon: 'photo',children: [
{
label: 'Happy atmosphere (with image)',img: 'https://cdn.quasar.dev/img/logo_calendar_128px.png'
},{ label: 'Good table presentation' },{ label: 'Pleasing decor' }
]
}
]
}
]
}
}
}
</script>
像这样来
现在,我想从本地JSON文件中获取这些节点,并且在单击Items时应显示一些文本。 请帮助我。
解决方法
在 ECMAScript 中导入 JSON:
如果你没有很多 JSON 文件,并且你有修改和转换成 JS 文件的权限,你可以按照这个答案:https://stackoverflow.com/a/39855320/3241933
然后您应该将 vanilla JS 对象导入到 data()
中。
示例解决方案:
<template>
<q-page class="flex fixed-left">
<q-tree
:nodes="simple"
node-key="label"
no-connectors
:expanded.sync="expanded"
text-color="blue"
></q-tree>
</q-page>
</template>
<style>
</style>
<script>
import jsonData from './data.js'
export default {
name: 'HelloWorld',data () {
return {
expanded: [ 'Resources' ],simple: jsonData
}
}
}
</script>
确保您的导入是一个对象数组。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。