0

I am very new to Quasar, I want to display Quasar tree nodes from a Local JSON file and with on click of a particular node item I want to show some text. As of now I am using Quasar tree like this.

 <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>

It was coming like this

enter image description here

Now I wanted to get these nodes from a local JSON file and on click on Items should display some text . Please help me with this.

Rama
  • 249
  • 1
  • 7
  • 22

1 Answers1

1

To import JSON in ECMAScript:
If you don't have a lot of JSON files and you have the permission to modify and convert them into JS files, you can follow this answer: https://stackoverflow.com/a/39855320/3241933

Then you should import the vanilla JS object into data().

Example solution:

<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>

Make sure that your import is an array of object.

nokogiri
  • 35
  • 5