From 94d14e459347eec60b9e386ddc8fc9d323322ea1 Mon Sep 17 00:00:00 2001
From: Falko Schindler <falko@zauberzeug.com>
Date: Fri, 17 Mar 2023 12:08:33 +0100
Subject: [PATCH] #272 simplify Vue component

---
 nicegui/elements/select.js | 58 ++++++++++++++++----------------------
 1 file changed, 25 insertions(+), 33 deletions(-)

diff --git a/nicegui/elements/select.js b/nicegui/elements/select.js
index ca882b098..70267a15b 100644
--- a/nicegui/elements/select.js
+++ b/nicegui/elements/select.js
@@ -1,41 +1,33 @@
 export default {
   props: ["options"],
   template: `
-    <q-select
-        v-bind="$attrs"
-        :model-value="model"
-        :options="options"
-        @filter="filterFn"
-        @input-value="setModel"
-    >
-        <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
-            <slot :name="slot" v-bind="slotProps || {}" />
-        </template>
-    </q-select>
-  `,
-  setup(props) {
-    const stringOptions = Vue.ref(props.options);
-    const model = Vue.ref(null);
-    const options = Vue.ref(stringOptions.value);
-    const filterFn = (val, update, abort) => {
+      <q-select v-bind="$attrs" :options="filteredOptions" @filter="filterFn">
+          <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
+              <slot :name="slot" v-bind="slotProps || {}" />
+          </template>
+      </q-select>
+    `,
+  data() {
+    return {
+      initialOptions: this.options,
+      filteredOptions: this.options,
+    };
+  },
+  methods: {
+    filterFn(val, update, abort) {
       update(() => {
         const needle = val.toLocaleLowerCase();
-        options.value = stringOptions.value.filter((v) => v.label.toLocaleLowerCase().indexOf(needle) > -1);
+        this.filteredOptions = this.initialOptions.filter((v) => v.label.toLocaleLowerCase().indexOf(needle) > -1);
       });
-    };
-    const setModel = (val) => (model.value = val);
-    Vue.watch(
-      () => props.options,
-      (newVal) => {
-        stringOptions.value = newVal;
-        options.value = stringOptions.value;
-      }
-    );
-    return {
-      model,
-      options,
-      filterFn,
-      setModel,
-    };
+    },
+  },
+  watch: {
+    options: {
+      handler(newOptions) {
+        this.initialOptions = newOptions;
+        this.filteredOptions = newOptions;
+      },
+      immediate: true,
+    },
   },
 };