wip

docs/usage/advanced-usage.md

@@ -16,19 +16,17 @@ otherwise the context menu will not function properly.
             Right click on me
         </p>
 
-        <vue-context ref="menu">
+        <vue-context ref="menu" v-slot="{ data }">
-            <template slot-scope="child">
             <li>
-                    <a @click.prevent="onClick($event.target.innerText, child.data)">
+                <a @click.prevent="onClick($event.target.innerText, data)">
                     Option 1
                 </a>
             </li>
-                <li>
+            <li v-if="data">
-                    <a @click.prevent="onClick($event.target.innerText, child.data)">
+                <a @click.prevent="onClick($event.target.innerText, data)">
-                        Option 2
+                    Option 2 - {{ data.foo }}
                 </a>
             </li>
-            </template>
         </vue-context>
     </div>
 </template>
@@ -45,15 +43,15 @@ otherwise the context menu will not function properly.
                 alert(`You clicked "${text}"!`);
                 console.log(data);
                 // => { foo: 'bar' }
-            }
+            },
-        }
+        },
     };
 </script>
 ```
 
 ## Props
 
-There are six props available on the context menu:
+There are many props available on the context menu. Some of them include:
 
 - `closeOnClick`
 - `closeOnScroll`
@@ -116,13 +114,15 @@ can be used and the accessiblity attributes can be added to each menu item.
                 tag: 'ul',
 
                 // This is how the component is able to find each menu item. Useful if you use non-recommended markup
-                itemSelector: ['.custom-item-class']
+                itemSelector: ['.custom-item-class'],
             };
-        }
+        },
     };
 </script>
 ```
 
+See [the api](/docs/vue-context/v6/api/vue-context) for more information on props.
+
 ## Events
 
 There are two events emitted by the context menu:
@@ -172,8 +172,8 @@ The `open` event is emitted when the context menu is shown and receives the foll
             onOpen(event, data, top, left) {
                 console.log('The context menu was opened');
                 console.log(event, data, top, left);
-            }
+            },
-        }
+        },
     };
 </script>
 ```
@@ -249,7 +249,7 @@ There is no limit on how far you can nest the menus, the only requirement is to
     import 'vue-context/src/sass/vue-context.scss'; // Alternatively import into a stylesheet instead
 
     export default {
-        components: { VueContext }
+        components: { VueContext },
     };
 </script>
 ```