fix: computed options prop not works

closes: #207
soc221b · Jun 4, 2021 · 75c8864 · 75c8864
1 parent a3300a0
commit 75c8864
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 3 deletions.
diff --git a/cypress/integration/props/options/computed-options.html b/cypress/integration/props/options/computed-options.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { createApp } = Vue
+
+      const app = createApp({
+        name: 'app',
+        computed: {
+          computedArray2() {
+            let computedArray = this.dataArray.filter(item => item.id !== this.selected1)
+
+            return computedArray
+          },
+        },
+        data() {
+          return {
+            selected1: null,
+            selected2: null,
+            options: [
+              { id: 1, framework: 'Express' },
+              { id: 2, framework: 'Django' },
+              { id: 3, framework: 'Laravel' },
+              { id: 4, framework: 'Python' },
+            ],
+            dataArray: [
+              { id: 1, name: 'Москва' },
+              { id: 2, name: 'Питер' },
+              { id: 3, name: 'Лондон' },
+              { id: 4, name: 'Чита' },
+            ],
+          }
+        },
+        template: `
+        <button id="toggle-options" @click="() => isOptions1 = false">
+          toggle options
+        </button>
+
+        <div id="select1">
+          <vue-select
+            v-model="selected1"
+            :options="options"
+            value-by="id"
+            label-by="framework"
+          />
+        </div>
+
+        <div id="select2">
+          <vue-select
+            v-model="selected2"
+            :options="computedArray2"
+            value-by="id"
+            label-by="name"
+          />
+        </div>
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/cypress/integration/props/options/index.spec.js b/cypress/integration/props/options/index.spec.js
@@ -51,4 +51,25 @@ context('options', () => {
     cy.get('.vue-dropdown-item.selected').should('have.length', 0)
     cy.get('.vue-dropdown-item').first().next().next().should('not.have.class', 'selected')
   })
+
+  it('should init with raw options', () => {
+    cy.visit(path.join(__dirname, 'raw-options.html'))
+    cy.get('.vue-select').click()
+
+    cy.get('.vue-dropdown-item:first-child').should('have.text', 'Express')
+  })
+
+  it('should update dropdown from computed options (#207)', () => {
+    cy.visit(path.join(__dirname, 'computed-options.html'))
+    cy.get('#select2 .vue-select').click()
+    cy.get('#select2 .vue-dropdown-item:first-child').should('have.text', 'Москва')
+    cy.get('#select2 .vue-select .icon.arrow-downward').click()
+
+    cy.get('#select1 .vue-select').click()
+    cy.get('#select1 .vue-dropdown-item:first-child').click()
+    cy.get('#select1 .vue-select .icon.arrow-downward').click()
+
+    cy.get('#select2 .vue-select').click()
+    cy.get('#select2 .vue-dropdown-item:first-child').should('not.have.text', 'Москва')
+  })
 })
diff --git a/cypress/integration/props/options/raw-options.html b/cypress/integration/props/options/raw-options.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link type="text/css" rel="stylesheet" href="/dist/index.css" />
+    <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="/dist/vue-next-select.iife.js"></script>
+    <script>
+      const { createApp, ref } = Vue
+
+      const app = createApp({
+        name: 'app',
+        setup() {
+          const selected = ref(null)
+          const options = [
+            { id: 1, framework: 'Express' },
+            { id: 2, framework: 'Django' },
+            { id: 3, framework: 'Laravel' },
+            { id: 4, framework: 'Python' },
+          ]
+          return {
+            selected,
+            options,
+          }
+        },
+        template: `
+        <vue-select
+          v-model="selected"
+          :options="options"
+          value-by="id"
+          label-by="framework"
+        />
+        `,
+      })
+
+      app.component('vue-select', VueNextSelect)
+      app.mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
diff --git a/src/normalize.js b/src/normalize.js
@@ -1,4 +1,4 @@
-import { reactive, computed, ref, isReactive, isRef, toRef, watchEffect } from 'vue'
+import { reactive, computed, toRef, watchEffect } from 'vue'
 
 const createComputedForGetterFunction = maybePathFunc =>
   computed(() => {
@@ -26,8 +26,7 @@ export default props => {
   const max = computed(() => (props.multiple ? props.max : 1))
   watchEffect(() => (normalized.max = max.value))
 
-  const options = isRef(props.options) || isReactive(props.options) ? toRef(props, 'options') : ref(props.options)
-  watchEffect(() => (normalized.options = options.value))
+  watchEffect(() => (normalized.options = props.options))
 
   return normalized
 }