fix(reduce): do not set $data._value in updateValue if reduce option …

…is set Closes #1210
sagalbot · Jun 25, 2020 · a21c973 · a21c973
1 parent 0f79e18
commit a21c973
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -713,7 +713,7 @@
        * @param value
        */
       updateValue (value) {
-        if (this.isTrackingValues) {
+        if (typeof this.value === 'undefined') {
           // Vue select has to manage value
           this.$data._value = value;
         }
@@ -989,7 +989,6 @@
        */
       selectedValue () {
         let value = this.value;
-
         if (this.isTrackingValues) {
           // Vue select has to manage value internally
           value = this.$data._value;

diff --git a/tests/unit/Reduce.spec.js b/tests/unit/Reduce.spec.js
@@ -100,27 +100,52 @@ describe("When reduce prop is defined", () => {
     expect(Select.vm.selectedValue).toEqual([]);
   });
 
-  it("can use v-model syntax for a two way binding to a parent component", () => {
+  it("can use v-model syntax for a two way binding to a parent component", async () => {
     const Parent = mount({
       data: () => ({
         reduce: option => option.value,
-        value: "foo",
+        current: "foo",
         options: [
           { label: "This is Foo", value: "foo" },
           { label: "This is Bar", value: "bar" },
           { label: "This is Baz", value: "baz" }
         ]
       }),
-      template: `<div><v-select :reduce="option => option.value" :options="options" v-model="value"></v-select></div>`,
-      components: { "v-select": VueSelect }
+      components: { "v-select": VueSelect },
+      computed: {
+        value: {
+          get() {
+            return this.current;
+          },
+          set(value) {
+            if (value == 'baz') return;
+            this.current = value;
+          }
+        }
+      },
+      template: `
+        <v-select
+          v-model="value"
+          :reduce="option => option.value"
+          :options="options"
+        />
+      `
     });
     const Select = Parent.vm.$children[0];
 
     expect(Select.value).toEqual("foo");
     expect(Select.selectedValue).toEqual([{ label: "This is Foo", value: "foo" }]);
 
     Select.select({ label: "This is Bar", value: "bar" });
+    await Select.$nextTick();
     expect(Parent.vm.value).toEqual("bar");
+    expect(Select.selectedValue).toEqual([{ label: "This is Bar", value: "bar" }]);
+
+    // Parent denies to set baz
+    Select.select({ label: "This is Baz", value: "baz" });
+    await Select.$nextTick();
+    expect(Select.selectedValue).toEqual([{ label: "This is Bar", value: "bar" }]);
+    expect(Parent.vm.value).toEqual('bar');
   });
 
   it("can generate labels using a custom label key", () => {