Title: Selection Tree on WordPress
Last modified: January 29, 2022

---

# Selection Tree on WordPress

 *  [jimbobleeharry](https://wordpress.org/support/users/jimbobleeharry/)
 * (@jimbobleeharry)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/)
 * Can I get this to work in wordpress?
 * I have been looking for a plugin with something similar, but no luck!
 * Please help, it will earn you some uber Karma.
 * Thanks,
    -  This topic was modified 4 years, 3 months ago by [jimbobleeharry](https://wordpress.org/support/users/jimbobleeharry/).
    -  This topic was modified 4 years, 3 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fq-tree-question%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [corrinarusso](https://wordpress.org/support/users/corrinarusso/)
 * (@corrinarusso)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/#post-15305633)
 * Your codepen is empty.
 *  Thread Starter [jimbobleeharry](https://wordpress.org/support/users/jimbobleeharry/)
 * (@jimbobleeharry)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/#post-15308189)
 * 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>
       ```
   
 *  Thread Starter [jimbobleeharry](https://wordpress.org/support/users/jimbobleeharry/)
 * (@jimbobleeharry)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/#post-15308191)
 * 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')
       ```
   
 *  Thread Starter [jimbobleeharry](https://wordpress.org/support/users/jimbobleeharry/)
 * (@jimbobleeharry)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/#post-15308202)
 * [https://quasar.dev/vue-components/tree#selection-vs-ticking-expansion](https://quasar.dev/vue-components/tree#selection-vs-ticking-expansion)
 *  [corrinarusso](https://wordpress.org/support/users/corrinarusso/)
 * (@corrinarusso)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/#post-15308365)
 * There are certainly different approaches that WordPress can accommodate, like
   this:
    [https://wordpress.org/plugins/category-checkbox-list-tree/](https://wordpress.org/plugins/category-checkbox-list-tree/)
   or this: [https://www.jstree.com/plugins/](https://www.jstree.com/plugins/)
 * However you should go through the docs to include Vue 3 in WordPress in your 
   want this type of behaviour:
    [https://itnext.io/yes-this-is-how-to-use-vue-js-with-wordpress-in-3-unique-ways-7a676c085bfe](https://itnext.io/yes-this-is-how-to-use-vue-js-with-wordpress-in-3-unique-ways-7a676c085bfe)
   [https://css-tricks.com/how-to-build-vue-components-in-a-wordpress-theme/](https://css-tricks.com/how-to-build-vue-components-in-a-wordpress-theme/)
   [https://css-tricks.com/how-to-build-vue-components-in-a-wordpress-theme/](https://css-tricks.com/how-to-build-vue-components-in-a-wordpress-theme/)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Selection Tree on WordPress’ is closed to new replies.

## Tags

 * [selection](https://wordpress.org/support/topic-tag/selection/)
 * [tree](https://wordpress.org/support/topic-tag/tree/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 2 participants
 * Last reply from: [corrinarusso](https://wordpress.org/support/users/corrinarusso/)
 * Last activity: [4 years, 3 months ago](https://wordpress.org/support/topic/q-tree-question/#post-15308365)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics