Hello how I can use this plugin in NuxtJS?

I tried to use in my NuxtJS app but wasn't worked due to this error

Cannot read property 'document' of undefined

Would you please help me fix this

hi, i have a problem with unescape string for option name.

here is my code:

<selectize id="service.serviceGroup_id" v-model="service.serviceGroup_id">
<option v-for="o in resources.groups" :value="o.id" v-html="o.title"></option>
</selectize>

Result of this is null as title, value of option is ok.

Unfortunately in vue2 is triple bracket {{{ }}} deprecated.

Thank you for help.

Thanks for your wrapper around selectize.
The caret is missing from the component on my local.
The following is my code.

<selectize v-model="dropdownTypeSelected">
    <option value="static">Static</option>
</selectize>

Thanks.

Currently the component does not react on dynamically updated options.
For example, I use localization in my app, and options depend on language strings:

<selectize v-model="userPhone.type">
  <option value="work">{{ lang.user_phone_work }}</option>
  <option value="personal">{{ lang.user_phone_personal }}</option>
</selectize>

This component is located on a page where user can change interface language. Thus, the component should be translated reactively. Currently it keeps previous, non-translated options.

How is it possible to update the component? Maybe there are some methods, hooks, etc? Ideally, if the component will be completely reactive out-of-the-box.

This issue exists on this repo

selectize/selectize.js#1464

If I remove the blur() function it works fine.

I'll try to do a PR to fix it using the same method selectize used.

Hi!

Firstly, thanks for the superb component!

I use page transitions and have noticed that component is destroyed before animation begins. Thus, standard selects become visible and layout is distorted at the time of the animation.

See the screencast:
http://take.ms/70FsB

Currently I use following workaround: simply apply styles to standard select (opacity: 0; height: ...px;). This helps, but selectize components disappear abruptly, this is drawback.

Is there any method to achieve selectizes destroying on transition end instead of begin?

Using valueField setting seems to make it so that the select box does not list the items.

How to call updatePlaceholder (or any method) described in the selectize.js API?

One example:

<selectize v-model="items" :settings="itemsSettings" ref="selectItems">
    <option v-for="option in items" :value="option.value">{{ option.text}}</option>
</selectize>

itemsSettings is {placeholder: 'Loading...'};

I'm loading the options in an AJAX request and I'd like to update the placeholder after the request concludes. I'm updating the placeholder, this.itemsSettings.placeholder = 'Select an item' and it doesn't react to the component. Selectize's API has a method to update the placeholder; I just can't call it. I tried this.$refs.selectItems.$el.selectize.updatePlaceholder(); to no effect (also no error thrown).

Thank you.

In the case that the form has not been submitted having the placeholder is fine, however I'd like to re-select the previously selected value post-submit. How can I do this?

After all I need to say that your implementation works fine with a single select but using the multiple option or maxItens = 10 (ex) on :settings when you click at the option the browser crash.

When using create in settings, like:

create: function(input,callback){
    ....
   callback();
}

I get this error:

Hello, is it possible to use this component without module loader/compiler? I'm using plain old javascript that is simply included on page, so I need a way to include your component. Any way you can provide built js files or instructions how I can build manually?

like remove button in tags ?

$('#input-tags3').selectize({
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

I've tried to figure out how I can get Selectize to work when creating the options list with v-for:

<option v-for="person in people" :value="person.id">{{ person.name }}</option>

The Selectize dropdown initializes as expected on the page but it's empty. Selectize seems to disregard what Vue is doing on the page. Perhaps Vue is creating the options after Selectize initializes? Not sure if that's the case or how I'd fix that. Anyway, is there a way to get v-for and Selectize to play nicely? Thanks.

Standard selects allow us to use options without specifying value attributes. In that case content inside <option> tag will be used as a value.

If I remember correctly, pure Selectize.js library allows to use options without value attribute.

vue2-selectize in that case causes errors to the console and does not operate correctly.

multi select not sync with data