Merge commit '99f2dfdc0a70a2a6e1e2fe4d1370f8d4b728a3ad' into reduce-bug-fix-options-watcher

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/css.md

@@ -34,4 +34,25 @@ all instances of Vue Select, or add your own classname if you just want to affec
 
 <<< @/.vuepress/components/CssSpecificity.vue
 
+## Dropdown Transition
 
+By default, the dropdown transitions with a `.15s` cubic-bezier opacity fade in/out. The component
+uses the [VueJS transition system](https://vuejs.org/v2/guide/transitions.html). By default, the
+ transition name is `vs__fade`. There's a couple ways to override or change this transition.
+
+1. Use the `transition` prop. Applying this prop will change the name of the animation classes and
+negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
+
+```html
+<v-select transition="" />
+```
+
+2. You can also override the default CSS for the `vs__fade` transition. Again, if you 
+wanted to eliminate the transition entirely:
+
+```css
+.vs__fade-enter-active,
+.vs__fade-leave-active {
+    transition: none;
+}
+```

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

docs/guide/slots.md

@@ -10,14 +10,13 @@ vue-select provides the scoped `option` slot in order to create custom dropdown
 
 ```html
 <v-select :options="options" label="title">
-    <template slot="option" slot-scope="option">
+    <template v-slot:option="option">
         <span :class="option.icon"></span>
         {{ option.title }}
     </template>
   </v-select>
 ``` 
 
-Using the `option` slot with `slot-scope="option"` gives the 
-provides the current option variable to the template.
+Using the `option` slot with props `"option"` provides the current option variable to the template.
 
 <CodePen url="NXBwYG" height="500"/>