Search code examples
javascriptvue.jsvue-routerjscolor

Local dependency not loaded with Vue/Vue Router, only after hard refresh

I am building an Vue application using Vue router. I have tried to implement the jscolor script from here. Basicly you have to include the script, and add the jscolor class to a html element. I am using SFC from vue.

HTML/Vue template

<div class="form-group row">
    <label for="departmentColor" class="col-sm-2 col-form-label label">{{ t('Color') }}</label>
    <div class="col-sm-10">
    <input type="text" class="CN-input-field jscolor" id="departmentColor" :value="department.color" @change="changeColor" :style="`background-color: ${department.color}`">
    </div>
</div>

JS

// Local deps (js file)
import jscolor from '../../../assets/js/jscolor';

So basicly, it is working when I do a hard refresh on the page itself, but when I am routing to the page from another page for instance it seems that the script is not loaded, because, well, the colorpicker is not active.

Is there somebody out there with the same problem, with a similiar dependency? Is there maybe a soluition for this problem?

Solution

  • Looking at the source code for jscolor, it appears that it registers itself onto elements with the jscolor class when the page has loaded. Any new elements inserted into the DOM at a later time will be unaffected.

    Your choices are:

    • Use a different library that supports dynamic elements.
    • You must manually attach jscolor to new elements after they have been added to the DOM (you could use a custom directive to do this).

    It's interesting that jscolor doesn't use event delegation for click events to cover this scenario.