CODEWITHSUNDEEP
vue.jsselectize.js
BouhaCode
BouhaCode

Reputation: 1

Apply Selectize to all select in my component

I wanted to apply Selectize to every select tag in my component .

The reason I need this to be a function is because I have select that can be added by button.

export default {
  data() {},
  methods: {
    applySelectize() {
      this.$nextTick(() => {
        const selects = $(this.$el).find('select');
        console.log('Select elements found:', selects.length); // returning 0 everytime 

        selects.each(function() {
          $(this).selectize();
        });
      });
    },
  },
  mounted() {
    this.applySelectize();

  },

  updated() {
    this.applySelectize();
  },
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.4/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" rel="stylesheet" />

<div class="form-group app-label">
  <label class="text-muted">Level</label>
  <select class="rounded" v-model="entry.level">
    <option value="1">Level-1</option>
    <option value="2">Level-2</option>
    <option value="3">Level-3</option>
    <option value="4">Level-4</option>
  </select>
</div>
<button @click="addEducationEntry" class="btn btn-primary mt-3"> Add More Education
    </button>

all of my imports are working fine because I managed to add selectize manually to a select by adding an id but since I'm making them dynamically I can't use id .

Upvotes: 0

Views: 20

Answers (1)

BouhaCode
BouhaCode

Reputation: 1

I guess I figured out my error. I changed the function from :

from :

const selects = $(this.$el).find('select');

to :

const selects = $("select");

Upvotes: 0

Related Questions