diff --git a/docs/.vuepress/components/LoopedSelect.vue b/docs/.vuepress/components/LoopedSelect.vue
new file mode 100644
index 0000000..75c29b1
--- /dev/null
+++ b/docs/.vuepress/components/LoopedSelect.vue
@@ -0,0 +1,43 @@
+
+
+
+
Name
+
Country
+
+
+
{{ person.name }}
+
+ updateCountry(person, country)"
+ />
+
+
+
+
+
+
+
+
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d8d80e0..583ba3d 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -114,12 +114,13 @@ module.exports = {
],
},
{
- title: 'Digging Deeper',
+ title: 'Use Cases',
collapsable: false,
children: [
['guide/validation', 'Validation'],
['guide/vuex', 'Vuex'],
['guide/ajax', 'AJAX'],
+ ['guide/loops', 'Using in Loops'],
],
},
{
diff --git a/docs/guide/loops.md b/docs/guide/loops.md
new file mode 100644
index 0000000..9c7e223
--- /dev/null
+++ b/docs/guide/loops.md
@@ -0,0 +1,17 @@
+### Using Vue Select in v-for Loops
+---
+
+There may be times that you are including Vue Select within loops of data, such as a table. This can
+pose some challenges when emitting events from the component, as you won't know which Vue Select
+instance emitted it. This can make it difficult to wire up with things like Vuex.
+
+Fortunately, you can solve this problem with an anonymous function. The example below doesn't use
+Vuex just to keep things succinct, but the same solution would apply. The `@input` is handled
+with an inline anonymous function, allowing the selected country to be passed to the `updateCountry`
+method with the `country` and the `person` object.
+
+
+
+<<< @/.vuepress/components/LoopedSelect.vue
+
+