vue.js v-model not updating if vue-range-slider component on page

Question

I have a problem with the structure of my Vue.js components, but I don't understand what it is.

This is my app.js :

require('./bootstrap');

window.Vue = require('vue');

Vue.component('search', require('./components/Search').default);
Vue.component('graph', require('./components/Graph').default);
Vue.component('account', require('./components/Account').default);
Vue.component('design-theme', require('./components/DesignTheme').default);

 const app = new Vue({
  el: '#app',
  data: {
  },
  methods: {
  },
  mounted: function () {
  },
  computed: {
  }
});

So I don't have any methods or anything here, it is all in the four individual components. Each component works fine on its own, but when there is more than one in a page, something is off. Consider the Search.vue component. It simply sends an axios request to the server on keyup and shows a list of results:

<template>
    <div class="search basic-search">
        <input type="text" v-model="search_string" v-on:keyup="search" class="form-control search" placeholder="Search" value=""/>
        <div :class="['search-results', active === true ? 'active' : '']">
            <div class="search-result" v-for="result in search_results" v-on:click="submit(result.id)">
                {{ result.name }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                search_string : '',
                search_results : [],
                active : false
            };
        },

        methods : {
            search : function() {
                const axios_data = {
                    _token  : $('meta[name="csrf-token"]').attr('content'),
                    str : this.search_string
                };

                axios.post('/search', axios_data).then(response => {

                    if(response.data.success){
                        this.search_results = response.data.stocks;
                        this.active = true;
                    }

                });
            },

            submit : function(stock_id) {
                document.location = "/graphs/" + stock_id;
            }
        }
    }
</script>

This works fine if the Graph.vue component is not included on the page. But, if it is, then search_str always remains empty, even though the search method is called on keyup .

There are no errors in the console - it's just that search_string remains empty when I type (as does the input field).

Perhaps I don't understand something on a conceptual level in Vue.js, but I can't figure out the relation here, or how to adapt the code to this situation.

This is the problematic part of the Graph component, if this is removed then the search works OK.

<vue-range-slider v-model="range" :min="0" :max="100" v-on:drag-end="updateRange"></vue-range-slider>

This is the component in question:

https://github.com/xwpongithub/vue-range-slider

Another interesting side effect (that I just noticed) is that, when this component is on the page, it is impossible to select text with the mouse. It seems like the component is somehow hijacking events, but I don't understand how.

Answer 1

As you identified correctly, the Vue Range Slider component is intercepting the events. There is an open merge request on their github page .

As suggested in the referenced issues, you should change this line in your package.json file:

"vue-range-component": "^1.0.3",

To this one:

"vue-range-component": "Anoesj/vue-range-slider#master",

However, since this is not the default branch of the plugin, you should frequently check the issue on github and switch back to the official branch as soon as the merge request passes.