+
+
+
+
+
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
+
+
diff --git a/package.json b/package.json
index a194899..deefd80 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"private": false,
"main": "dist/vue-select.js",
"license": "MIT",
+ "prepare": "npm run build",
"scripts": {
"serve": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress -d",
"serve:docs": "cd docs && yarn serve",