From 0a589704f8dcfc29f3bcd9394549ef00b5385e86 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Thu, 7 Nov 2019 18:15:41 -0800
Subject: [PATCH] add v-for docs (#982)

---
 docs/.vuepress/components/LoopedSelect.vue | 43 ++++++++++++++++++++++
 docs/.vuepress/config.js                   |  3 +-
 docs/guide/loops.md                        | 17 +++++++++
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vuepress/components/LoopedSelect.vue
 create mode 100644 docs/guide/loops.md

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 @@
+<template>
+  <table>
+    <tr>
+      <th>Name</th>
+      <th>Country</th>
+    </tr>
+    <tr v-for="person in people">
+      <td>{{ person.name }}</td>
+      <td>
+        <v-select
+          :options="options"
+          :value="person.country"
+          @input="country => updateCountry(person, country)"
+        />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script>
+import countries from '../data/countries';
+
+export default {
+  data: () => ({
+    people: [{name: 'John', country: ''}, {name: 'Jane', country: ''}],
+  }),
+  methods: {
+    updateCountry (person, country) {
+      person.country = country;
+    },
+  },
+  computed: {
+    options: () => countries,
+  },
+};
+</script>
+
+<style scoped>
+  table {
+    display: table;
+    width: 100%;
+  }
+</style>
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.  
+
+<LoopedSelect />
+
+<<< @/.vuepress/components/LoopedSelect.vue
+
+