From ca5a68bce16353fed7ed3cd38f76a67f47fa7ffc Mon Sep 17 00:00:00 2001
From: skillsnate <109138872+skillsnate@users.noreply.github.com>
Date: Tue, 2 Jan 2024 08:48:19 +1000
Subject: [PATCH] Update selectors.md

Added a component example, with a template, to make it clear how the selectors can work
---
 docs/api/selectors.md | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/api/selectors.md b/docs/api/selectors.md
index 3c2428277..eb9ac4122 100644
--- a/docs/api/selectors.md
+++ b/docs/api/selectors.md
@@ -41,6 +41,35 @@ expect(wrapper.is(Foo)).toBe(true)
 
 ### Find Option Object
 
+Suppose you have the following component
+```js
+// MyButtonComponent.vue
+
+<template>
+  <button class="btn" name="my-button" :ref="myButtonRef">Click My Button</button>
+</template>
+<script lang="ts">
+export default defineComponent({
+  name: 'MyButtonComponent',
+  computed: {
+    myButtonRef() {
+      return 'dynamic-my-button-ref';
+    }
+  }
+</script>
+
+or
+
+const MyButtonComponent = {
+  template: '<button class="btn" name="my-button" :ref="myButtonRef">Click My Button</button>',
+  computed: {
+    myButtonRef() {
+      return 'dynamic-my-button-ref';
+    }
+  }
+};
+```
+
 #### Name
 
 Using a find option object, Vue Test Utils allows for selecting elements by a `name` of component on wrapper components.
@@ -55,6 +84,6 @@ buttonWrapper.trigger('click')
 Using a find option object, Vue Test Utils allows for selecting elements by `$ref` on wrapper components.
 
 ```js
-const buttonWrapper = wrapper.find({ ref: 'myButton' })
+const buttonWrapper = wrapper.find({ ref: 'dynamic-my-button-ref' })
 buttonWrapper.trigger('click')
 ```