Merge commit '99f2dfdc0a70a2a6e1e2fe4d1370f8d4b728a3ad' into 975-dropdown-option-slot-overhaul

build/webpack.prod.conf.js

@@ -17,11 +17,6 @@ module.exports = merge(baseWebpackConfig, {
     minimizer: [
       new TerserPlugin({
         sourceMap: true,
-        terserOptions: {
-          compress: {
-            drop_console: true,
-          },
-        },
       }),
     ],
   },

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>

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'],
           ],
         },
         {

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
+
+

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",