jimbobleeharry

Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • Forum: Fixing WordPress
    In reply to: Selection Tree on WordPress
    Thread Starter jimbobleeharry

    (@jimbobleeharry)

    4 years, 3 months ago

    https://quasar.dev/vue-components/tree#selection-vs-ticking-expansion

    Forum: Fixing WordPress
    In reply to: Selection Tree on WordPress
    Thread Starter jimbobleeharry

    (@jimbobleeharry)

    4 years, 3 months ago

    JS

    const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      selected: ref('Pleasant surroundings'),
      ticked: ref([ 'Quality ingredients', 'Good table presentation' ]),
      expanded: ref([ 'Satisfied customers', 'Good service (disabled node)', 'Pleasant surroundings' ]),

      simple: [
        {
          label: 'Satisfied customers',
          children: [
            {
              label: 'Good food',
              children: [
                { label: 'Quality ingredients' },
                { label: 'Good recipe' }
              ]
            },
            {
              label: 'Good service (disabled node)',
              disabled: true,
              children: [
                { label: 'Prompt attention' },
                { label: 'Professional waiter' }
              ]
            },
            {
              label: 'Pleasant surroundings',
              children: [
                { label: 'Happy atmosphere' },
                { label: 'Good table presentation' },
                { label: 'Pleasing decor' }
              ]
            }
          ]
        }
      ]
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')
    Forum: Fixing WordPress
    In reply to: Selection Tree on WordPress
    Thread Starter jimbobleeharry

    (@jimbobleeharry)

    4 years, 3 months ago

    Sorry, HTML

    <!--
  Forked from:
  https://quasar.dev/vue-components/tree#example--syncing-node-properties
-->
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md row q-col-gutter-sm">
    <q-tree class="col-12 col-sm-6"
      :nodes="simple"
      node-key="label"
      tick-strategy="leaf"
      v-model:selected="selected"
      v-model:ticked="ticked"
      v-model:expanded="expanded"
    ></q-tree>
    <div class="col-12 col-sm-6 q-gutter-sm">
      <div class="text-h6">Selected</div>
      <div>{{ selected }}</div>

      <q-separator spaced></q-separator>

      <div class="text-h6">Ticked</div>
      <div>
        <div v-for="tick in ticked" :key="<code>ticked-${tick}</code>">
          {{ tick }}
        </div>
      </div>

      <q-separator spaced></q-separator>

      <div class="text-h6">Expanded</div>
      <div>
        <div v-for="expand in expanded" :key="<code>expanded-${expand}</code>">
          {{ expand }}
        </div>
      </div>
    </div>
  </div>
</div>
Viewing 3 replies - 1 through 3 (of 3 total)