[Vuejs]-Vue.js disabling other js plugin

by

0👍

Your code does not work because you have use v-if directive; it injects the html or the component when the condition is met. Use v-show it just inline the css "display:none" to "display:block"

https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

As you have used v-if, the element is not render on dom. Its not available for the jquery selector to select that element
Here is the working example

https://jsfiddle.net/gowdagold/2manp88k/7/

var region = new Vue({
  el: '#app',
    data: {
      first_value: '',
    },
    mounted() {
          
    },
    computed: {
      show() {
        console.log(this.first_value)
          if ('1' === this.first_value) {
            return true;
          } else
            return false;
          },
       hide() {
         console.log(this.first_value)
           if ('2' === this.first_value) {
             return true;
           } else
             return false;
           }
       }
    }
  });
$('#example').select2({
  placeholder: 'Select a month'
});

0👍

This is how you can use other plugins inside of VueJS component:

mounted: function() {
  $(this.$el).datepicker();
}

Leave a comment