Q-tree with q-toggle

CWoodman

I want to build a ‘settings’ tree with toggles for each setting value. But I can’t figure out how to make the toggles actually do anything. The state of each toggle will be kept in a store module.
Here’s a screen-shot of my test:
tree toggle.png
The top toggle works fine, but the one in the tree does not.

Here’s the code:

<!-- This toggle works fine -->
    <q-toggle v-model='labels'
      label="Show button labels"
    />
    <!-- But toggle in the tree doesn't work -->
    <q-tree
      :nodes="settings"
      node-key="label"
    >
      <template v-slot:header-toggle="prop">
        <q-toggle v-model="prop.node.model" :label="prop.node.label" />
      </template>
    </q-tree>

<script>
import ToolbarButton from '../widgets/ToolbarButton'
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('main', ['buttonLabels']),

    labels: {
      get () {
        return this.buttonLabels
      },
      set () {
        this.toggleButtonLabels()
      }
    }
  },

  methods: {
    ...mapActions('main', ['toggleButtonLabels'])
  },

  data () {
    return {
      settings: [
        {
          label: 'General settings',
          children: [
            {
              header: 'toggle',
              label: 'Show button labels',
              body: 'toggle',
              model: this.labels
            }
          ]
        }
      ]
    }
  }
}
</script>

Any help will be appreciated.

dobbel

@CWoodman

I don’t think the second toggle has a proper v-model value.( because it’s now in Indeterminate state = null). model: this.labels ?

codepen?

CWoodman

@dobbel Using vuex store, so can’t do a codepen. this.labels is a computed getter/setter as shown in the code.
If I change the tree node ‘model’ to use a local data variable, it still doesn’t work. I must not be understanding how the ‘v-model=“prop.node.model”’ works.

metalsadman

@CWoodman vuex works in codepen. If youre having trouble setting it up, use codesandbox instead, fork the one from the docs and do your reproduction code there.

CWoodman

@metalsadman OK, I made a codepen (not using vuex)
https://codepen.io/crawfordw/pen/poyRqqJ?editors=1111

Shows what I’m trying to do, with a sample button - I want the user to be able to show/hide button labels with a toggle in a ‘settings tree’. But I’m not understanding how to control or respond to the toggle’s state when it’s in a tree.

And while we’re at it, is there a better way to make a button’s label optional without repeating it’s code using v-if?

dobbel

@CWoodman

this example has a working toggle in the q-tree:

https://quasar.dev/vue-components/tree#Example--Customizing-nodes

CWoodman

@dobbel Yes, that’s what I used as my template. But I don’t want the model to control disabled - I want it to toggle a data value and for some reason it doesn’t work for me, as you can see in my codepen.

dobbel

@CWoodman

I don’t understand v-model can contain anything, in the example it’s bound to disabled/enabled but it can be bound to anything.

I suggest to build your code around a working example.

working code:

  <template v-slot:body-toggle="prop">
        <p class="text-caption">{{ prop.node.caption }}</p>
        <q-toggle v-model="prop.node.whatever" />
      </template>

your code:

  <template v-slot:header-toggle="prop">
        <q-toggle v-model="prop.node.model" :label="prop.node.label" />
      </template>

for example your code uses a different slot

CWoodman

@dobbel The codepen works fine if you hard-code a value in the ‘model’ for the node. The question is 'how can the node’s model value be linked dynamically to another data value (or in my case a state value from the store). It seems I can’t just say:

data: function () {
    return {
      showLabels: false,
      settings: [
        {
          label: 'General settings',
          children: [
            {
              header: 'toggle',
              label: 'Show button labels',
              body: 'toggle',
              model: this.showLabels
            }
          ]
        }
      ]
    }

where the model prop is set to another data value (this.showLabels). How can this prop be bound dynamically with two-way connection to another data value??

dobbel

This post is deleted!

dobbel

@CWoodman

dynamically linking won’t work like you tried.

https://stackoverflow.com/questions/49614837/how-to-reference-data-variable-from-another-data-variable-in-vue-2

This does work:

data: function () {
        return {
            settings: [
                {
                    label: 'General settings',
                    children: [
                        {
                            header: 'toggle',
                            label: 'Show button labels',
                            body: 'toggle',
                            model: false
                        }
                    ]
                }
            ]
        }
    },
    computed: {
        showLabels () {
            return this.settings[0].children[0].model
        }
    }

This is probably not what you want…
I suggest you take a look at vuex-orm like suggested earlier.

CWoodman

@dobbel Thanks for your suggestions. I’ve decided to drop the toggle idea and just use the q-tree built-in check boxes. Works fine.

qyloxe

@CWoodman this tree implementation is VERY interesting - it has one of the cleanest and elegant implementation, it has PROPER dnd handling of middle nodes, and is generally easy to extend/modify:

https://github.com/TinyWisp/twtree

BEWARE - it is not optimized for large trees, I hope there will be commits soon from some good soul, correcting those few simple inefficiencies. If it will be corrected, this tree might be one of the best vue trees.