如何从本地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>

确保您的导入是一个对象数组。