WIP - potential fix

dev/Dev.vue

@@ -1,8 +1,19 @@
 <template>
   <div id="app">
-    <sandbox hide-help v-slot="config">
+    <v-select
-      <v-select v-bind="config" />
+      :options="options"
-    </sandbox>
+      :reduce="opt => opt.ContactID"
+      label="summary_text"
+      v-model="selected"
+    >
+      <template slot="option" slot-scope="option">
+        <span v-html="option.summary_short"></span>
+      </template>
+    </v-select>
+    <button @click="options = []">reset options</button>
+    <button @click="selected = 3">select 3</button>
+    <pre>options: {{ options }}</pre>
+    <pre>selected: {{ selected }}</pre>
   </div>
 </template>
 
@@ -14,6 +25,32 @@ import Sandbox from '../docs/.vuepress/components/Sandbox';
 
 export default {
   components: {Sandbox, vSelect},
+  data: () => ({
+    selected: 1,
+    options: [
+      {
+        ContactID: 1,
+        Firstname: 'John',
+        Lastname: 'Connor',
+        summary_short: '<b>John Connor</b><br><small>* 28. February 1985<br/>Los Angeles</small>',
+        summary_text: 'John Connor, Los Angeles, 28. Februar 1985',
+      },
+      {
+        ContactID: 2,
+        Firstname: 'Sarah',
+        Lastname: 'Connor',
+        summary_short: '<b>Sarah Connor</b><br><small>* 1965<br/>Los Angeles</small>',
+        summary_text: 'Sarah Connor, Los Angeles, 1965',
+      },
+      {
+        ContactID: 3,
+        Firstname: 'Kyle',
+        Lastname: 'Reese (Connor)',
+        summary_short: '<b>Kyle Reese</b><br><small>* 2002<br/>Los Angeles</small>',
+        summary_text: 'Kyle Reese, Los Angeles, 2002',
+      },
+    ],
+  }),
 };
 </script>
 
@@ -27,6 +64,8 @@ export default {
 
   #app {
     height: 100%;
+    width: 50%;
+    margin: 5rem auto;
   }
 
   hr {

docs/.vuepress/components/Sandbox.vue

@@ -118,7 +118,8 @@
         </div>
 
         <div class="example">
-          <v-select v-bind="configuration" :options="['cat', 'dog', 'bear']" placeholder="string options, option slots">
+          <v-select v-bind="configuration" :options="['cat', 'dog', 'bear']"
+                    placeholder="string options, option slots">
             <template slot="selected-option" slot-scope="{ label }">
               {{ label }}
             </template>
@@ -129,11 +130,13 @@
         </div>
 
         <div class="example">
-          <v-select v-bind="configuration" :options="[1,5,10]" placeholder="options=[1,5,10]"></v-select>
+          <v-select v-bind="configuration" :options="[1,5,10]"
+                    placeholder="options=[1,5,10]"></v-select>
         </div>
 
         <div class="example">
-          <v-select v-bind="configuration" label="title" :options="optionDataSets.books" :filter="fuseSearch"
+          <v-select v-bind="configuration" label="title" :options="optionDataSets.books"
+                    :filter="fuseSearch"
                     placeholder="advanced filtering w/ fuse.js + scoped slots">
             <template slot="option" slot-scope="option">
               <strong>{{ option.title }}</strong><br>
@@ -204,6 +207,9 @@ export default {
     };
   },
   methods: {
+    swap () {
+      this.configuration.options = [];
+    },
     search (search, loading) {
       loading(true);
       this.getRepositories(search, loading, this);
@@ -241,8 +247,7 @@ export default {
     display: grid;
     grid-template-columns: auto 75%;
     grid-template-rows: auto;
-    grid-template-areas:
+    grid-template-areas: "sidebar component"
-            "sidebar component"
   }
 
   #config {

src/components/Select.vue

@@ -472,14 +472,13 @@
        * when options change.
        * Make sure selected option
        * is correct.
-       * @return {[type]} [description]
        */
       options(val) {
         if (!this.taggable && this.resetOnOptionsChange) {
           this.clearSelection()
         }
 
-        if (this.value && this.isTrackingValues) {
+        if (this.resetOnOptionsChange && this.isTrackingValues) {
           this.setInternalValueFromOptions(this.value)
         }
       },

tests/unit/ReactiveOptions.spec.js

@@ -26,7 +26,7 @@ describe("Reset on options change", () => {
 
   it("should return correct selected value when the options property changes and a new option matches", () => {
     const Select = shallowMount(VueSelect, {
-      propsData: { value: "one", options: [], reduce(option) { return option.value } }
+      propsData: { value: "one", options: [], reduce: option => option.value }
     });
 
     Select.setProps({options: [{ label: "oneLabel", value: "one" }]});