Fusseldieb · March 23, 2022 03:19 · Nov 28, 2018 · Nov 28, 2018 · Nov 28, 2018 · Nov 28, 2018
diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,6 +1,6 @@
 <!--
 
-Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
+Access it with: <select2 v-model="field.value" :options="field.options" :tags="true"></select2> 
 A object exists with following structure:
 field: {
   value: "",

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -41,7 +41,6 @@ export default {
   props: ["options", "value", "ajax", "tags"],
   mounted: function() {
     var vm = this;
-    // console.log(this.options);
     let options = [];
     options.push({
       id: "",

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,7 +1,7 @@
 <!--
 
 Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
-A object exist with following structure:
+A object exists with following structure:
 field: {
   value: "",
   options: [

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,7 +1,7 @@
 <!--
 
 Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
-A object fields exist with following structure:
+A object exist with following structure:
 field: {
   value: "",
   options: [

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -2,7 +2,7 @@
 
 Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
 A object fields exist with following structure:
-fields: {
+field: {
   value: "",
   options: [
     { id: "0", text: "No" },

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -12,7 +12,7 @@ fields: {
 }
 
 The "tags" parameter is there to allow the user to write its own text and select it.
-In the "options" array, there are "id" and "text", but if no "id" is specified, "text" will be used on both. See ternary in template below.
+In the "options" array, there are "id" and "text".
 The "ajax" object is also supported. Just add :ajax="field.ajax" to the HTML tag and put your ajax call inside "field" as "ajax".
 
 Import this component in your view or whatever with:

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -23,16 +23,13 @@ import Select2 from "@/components/Select2.vue"; (or where the file is)
 EDIT: Now the options are reactive. 
 If you use a computed property to translate the options (or similar), 
 this Select2 template will automatically update all options and select the same option again, with the new text Strings.
-(It does that by destroying, and then recreating the Select2 instance in the nextTick. 
-This reinitialization is unnoticeable to the human eye.)
+
+EDIT2: [BUGFIX] Fixed v-model being destroyed. Now the options are reloaded without destroying and reloading Select2.
 
 -->
 
 <template>
-  <select :value="value" style="width: 100%">
-    <option value="" selected disabled>Choose...</option>
-    <option v-for="(val) in options" :key="val.id">{{val.text}}</option>
-  </select>
+  <select :value="value" style="width: 100%"></select>
 </template>
 
 <script>
@@ -44,9 +41,19 @@ export default {
   props: ["options", "value", "ajax", "tags"],
   mounted: function() {
     var vm = this;
+    // console.log(this.options);
+    let options = [];
+    options.push({
+      id: "",
+      text: "Choose...", // Supports vue-i18n, just put 'this.$t('select2.choose')' here 
+      disabled: true,
+      selected: true
+    });
+    options = options.concat(this.options);
+
     $(this.$el)
       // init select2
-      .select2({ data: this.options, ajax: this.ajax, tags: this.tags })
+      .select2({ ajax: this.ajax, tags: this.tags, data: options })
       .val(this.value)
       .trigger("change")
       // emit event on change.
@@ -61,15 +68,18 @@ export default {
         .val(value)
         .trigger("change");
     },
-    options: function(options) {
-      // update options
-      $(this.$el)
-        .off()
-        .select2("destroy");
-
-      this.$nextTick(function() {
-        $(this.$el).select2();
+    options: function(newoptions) {
+      let options = [];
+      options.push({
+        id: "",
+        text: "Choose...", // Supports vue-i18n, just put 'this.$t('select2.choose')' here 
+        disabled: true,
+        selected: true
       });
+      options = options.concat(newoptions);
+      $(this.$el)
+        .empty()
+        .select2({ data: options });
     }
   },
   destroyed: function() {

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -20,7 +20,7 @@ import Select2 from "@/components/Select2.vue"; (or where the file is)
 
 ... Basically an "improved" example of https://vuejs.org/v2/examples/select2.html
 
-EDIT: Now supports "options live reloading". 
+EDIT: Now the options are reactive. 
 If you use a computed property to translate the options (or similar), 
 this Select2 template will automatically update all options and select the same option again, with the new text Strings.
 (It does that by destroying, and then recreating the Select2 instance in the nextTick. 

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -21,8 +21,8 @@ import Select2 from "@/components/Select2.vue"; (or where the file is)
 ... Basically an "improved" example of https://vuejs.org/v2/examples/select2.html
 
 EDIT: Now supports "options live reloading". 
-If you use vue-i18n (or something else) and use a computed property to translate the options (or similar), 
-this Select2 template will automatically update all options and select the same option again, with the new language.
+If you use a computed property to translate the options (or similar), 
+this Select2 template will automatically update all options and select the same option again, with the new text Strings.
 (It does that by destroying, and then recreating the Select2 instance in the nextTick. 
 This reinitialization is unnoticeable to the human eye.)
 

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -20,11 +20,17 @@ import Select2 from "@/components/Select2.vue"; (or where the file is)
 
 ... Basically an "improved" example of https://vuejs.org/v2/examples/select2.html
 
+EDIT: Now supports "options live reloading". 
+If you use vue-i18n (or something else) and use a computed property to translate the options (or similar), 
+this Select2 template will automatically update all options and select the same option again, with the new language.
+(It does that by destroying, and then recreating the Select2 instance in the nextTick. 
+This reinitialization is unnoticeable to the human eye.)
+
 -->
 
 <template>
   <select :value="value" style="width: 100%">
-    <option value="" selected disabled>Auswählen...</option>
+    <option value="" selected disabled>Choose...</option>
     <option v-for="(val) in options" :key="val.id">{{val.text}}</option>
   </select>
 </template>

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -24,7 +24,8 @@ import Select2 from "@/components/Select2.vue"; (or where the file is)
 
 <template>
   <select :value="value" style="width: 100%">
-    <option value="" selected disabled>Choose...</option>
+    <option value="" selected disabled>Auswählen...</option>
+    <option v-for="(val) in options" :key="val.id">{{val.text}}</option>
   </select>
 </template>
 
@@ -53,13 +54,16 @@ export default {
       $(this.$el)
         .val(value)
         .trigger("change");
-      console.log("CHNG", value);
     },
     options: function(options) {
       // update options
       $(this.$el)
-        .empty()
-        .select2({ data: options });
+        .off()
+        .select2("destroy");
+
+      this.$nextTick(function() {
+        $(this.$el).select2();
+      });
     }
   },
   destroyed: function() {

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -18,6 +18,8 @@ The "ajax" object is also supported. Just add :ajax="field.ajax" to the HTML tag
 Import this component in your view or whatever with:
 import Select2 from "@/components/Select2.vue"; (or where the file is)
 
+... Basically an "improved" example of https://vuejs.org/v2/examples/select2.html
+
 -->
 
 <template>

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -5,7 +5,7 @@ A object fields exist with following structure:
 fields: {
   value: "",
   options: [
-    { id: "0", text: "Nein" },
+    { id: "0", text: "No" },
     { id: "5", text: "5 mm" },
     { id: "10", text: "10 mm" }
   ]
@@ -22,7 +22,7 @@ import Select2 from "@/components/Select2.vue"; (or where the file is)
 
 <template>
   <select :value="value" style="width: 100%">
-    <option value="" selected disabled>Auswählen...</option>
+    <option value="" selected disabled>Choose...</option>
   </select>
 </template>
 

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,35 +1,29 @@
 <!--
 
-Access it with: <select2 v-model="field.value" :options="field.options" :tags="true"></select2>
-
-A object "field" exist with following structure:
-field: {
+Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
+A object fields exist with following structure:
+fields: {
   value: "",
   options: [
-    { value: "0", text: "No" },
-    { value: "5", text: "5 mm" },
-    { value: "10", text: "10 mm" }
+    { id: "0", text: "Nein" },
+    { id: "5", text: "5 mm" },
+    { id: "10", text: "10 mm" }
   ]
 }
 
 The "tags" parameter is there to allow the user to write its own text and select it.
-In the "options" array, there are "value" and "text", but if no "value" is specified, "text" will be used on both. See ternary in template below.
+In the "options" array, there are "id" and "text", but if no "id" is specified, "text" will be used on both. See ternary in template below.
 The "ajax" object is also supported. Just add :ajax="field.ajax" to the HTML tag and put your ajax call inside "field" as "ajax".
 
-
 Import this component in your view or whatever with:
-import Select2 from "@/components/select2-custom.vue"; (or wherever the file is)
+import Select2 from "@/components/Select2.vue"; (or where the file is)
 
 -->
 
 <template>
-      <select :value="value" style="width: 100%">
-        <option value="" selected disabled>Choose...</option>
-        <option v-if="!options">{{ value }}</option>
-        <option v-for="option in options" :value="option.value ? option.value : option.text"> 
-          {{ option.text }}
-        </option>
-    </select>
+  <select :value="value" style="width: 100%">
+    <option value="" selected disabled>Auswählen...</option>
+  </select>
 </template>
 
 <script>
@@ -38,29 +32,38 @@ import select2 from "select2";
 
 export default {
   name: "Select2",
-  props: ["value", "options", "tags", "ajax"],
+  props: ["options", "value", "ajax", "tags"],
   mounted: function() {
-    const vm = this;
-
-    $(vm.$el)
-      .select2({
-        tags: vm.tags,
-        // selectOnClose: true,
-        ajax: vm.ajax
-      })
+    var vm = this;
+    $(this.$el)
+      // init select2
+      .select2({ data: this.options, ajax: this.ajax, tags: this.tags })
+      .val(this.value)
+      .trigger("change")
+      // emit event on change.
       .on("change", function() {
-        vm.$emit("input", vm.$el.value);
+        vm.$emit("input", this.value);
       });
   },
   watch: {
     value: function(value) {
+      // update value
       $(this.$el)
         .val(value)
         .trigger("change");
+      console.log("CHNG", value);
     },
-//  options: function(options) {
-//    console.log(options);
-//  }
+    options: function(options) {
+      // update options
+      $(this.$el)
+        .empty()
+        .select2({ data: options });
+    }
+  },
+  destroyed: function() {
+    $(this.$el)
+      .off()
+      .select2("destroy");
   }
 };
 </script>
diff --git a/select2-custom.vue b/select2-custom.vue
@@ -58,9 +58,9 @@ export default {
         .val(value)
         .trigger("change");
     },
-    options: function(options) {
-      console.log(options);
-    }
+//  options: function(options) {
+//    console.log(options);
+//  }
   }
 };
 </script>
diff --git a/select2-custom.vue b/select2-custom.vue
@@ -18,7 +18,7 @@ The "ajax" object is also supported. Just add :ajax="field.ajax" to the HTML tag
 
 
 Import this component in your view or whatever with:
-import Select2 from "@/components/select2-custom.vue"; (or where the file is)
+import Select2 from "@/components/select2-custom.vue"; (or wherever the file is)
 
 -->
 

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,6 +1,7 @@
 <!--
 
-Access it with: <select2 v-model="field.value" :options="field.options" :tags="true"></select2> 
+Access it with: <select2 v-model="field.value" :options="field.options" :tags="true"></select2>
+
 A object "field" exist with following structure:
 field: {
   value: "",

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -5,7 +5,7 @@ A object "field" exist with following structure:
 field: {
   value: "",
   options: [
-    { value: "0", text: "Nein" },
+    { value: "0", text: "No" },
     { value: "5", text: "5 mm" },
     { value: "10", text: "10 mm" }
   ]
@@ -23,7 +23,7 @@ import Select2 from "@/components/select2-custom.vue"; (or where the file is)
 
 <template>
       <select :value="value" style="width: 100%">
-        <option value="" selected disabled>Auswählen...</option>
+        <option value="" selected disabled>Choose...</option>
         <option v-if="!options">{{ value }}</option>
         <option v-for="option in options" :value="option.value ? option.value : option.text"> 
           {{ option.text }}

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,8 +1,8 @@
 <!--
 
-Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
-A object fields exist with following structure:
-fields: {
+Access it with: <select2 v-model="field.value" :options="field.options" :tags="true"></select2> 
+A object "field" exist with following structure:
+field: {
   value: "",
   options: [
     { value: "0", text: "Nein" },
@@ -13,6 +13,8 @@ fields: {
 
 The "tags" parameter is there to allow the user to write its own text and select it.
 In the "options" array, there are "value" and "text", but if no "value" is specified, "text" will be used on both. See ternary in template below.
+The "ajax" object is also supported. Just add :ajax="field.ajax" to the HTML tag and put your ajax call inside "field" as "ajax".
+
 
 Import this component in your view or whatever with:
 import Select2 from "@/components/select2-custom.vue"; (or where the file is)
@@ -35,7 +37,7 @@ import select2 from "select2";
 
 export default {
   name: "Select2",
-  props: ["value", "options", "tags", "format", "ajax"],
+  props: ["value", "options", "tags", "ajax"],
   mounted: function() {
     const vm = this;
 

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -1,3 +1,24 @@
+<!--
+
+Access it with: <select2 v-model="fields.value" :options="fields.options" :tags="true"></select2> 
+A object fields exist with following structure:
+fields: {
+  value: "",
+  options: [
+    { value: "0", text: "Nein" },
+    { value: "5", text: "5 mm" },
+    { value: "10", text: "10 mm" }
+  ]
+}
+
+The "tags" parameter is there to allow the user to write its own text and select it.
+In the "options" array, there are "value" and "text", but if no "value" is specified, "text" will be used on both. See ternary in template below.
+
+Import this component in your view or whatever with:
+import Select2 from "@/components/select2-custom.vue"; (or where the file is)
+
+-->
+
 <template>
       <select :value="value" style="width: 100%">
         <option value="" selected disabled>Auswählen...</option>

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -30,8 +30,6 @@ export default {
   },
   watch: {
     value: function(value) {
-      // update value
-
       $(this.$el)
         .val(value)
         .trigger("change");

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -24,7 +24,6 @@ export default {
         // selectOnClose: true,
         ajax: vm.ajax
       })
-      // .trigger("change")
       .on("change", function() {
         vm.$emit("input", vm.$el.value);
       });
@@ -39,7 +38,6 @@ export default {
     },
     options: function(options) {
       console.log(options);
-      console.log("Options Debug Test");
     }
   }
 };

diff --git a/select2-custom.vue b/select2-custom.vue
@@ -0,0 +1,46 @@
+<template>
+      <select :value="value" style="width: 100%">
+        <option value="" selected disabled>Auswählen...</option>
+        <option v-if="!options">{{ value }}</option>
+        <option v-for="option in options" :value="option.value ? option.value : option.text"> 
+          {{ option.text }}
+        </option>
+    </select>
+</template>
+
+<script>
+import $ from "jquery";
+import select2 from "select2";
+
+export default {
+  name: "Select2",
+  props: ["value", "options", "tags", "format", "ajax"],
+  mounted: function() {
+    const vm = this;
+
+    $(vm.$el)
+      .select2({
+        tags: vm.tags,
+        // selectOnClose: true,
+        ajax: vm.ajax
+      })
+      // .trigger("change")
+      .on("change", function() {
+        vm.$emit("input", vm.$el.value);
+      });
+  },
+  watch: {
+    value: function(value) {
+      // update value
+
+      $(this.$el)
+        .val(value)
+        .trigger("change");
+    },
+    options: function(options) {
+      console.log(options);
+      console.log("Options Debug Test");
+    }
+  }
+};
+</script>