Vue.js 禁用其他 js 插件

Question

我已经使用 vue.js 制作了一个依赖下拉列表，并集成了另外 2 个用于多选（select2 和多选）的 jquery 应用程序。 我遇到的问题是启用 vue js [add element to el: ] 时其他两个插件不运行，当 vue 元素被删除时，两个插件运行顺利。 代码被剪断。

片段

Answer 1

您的代码不起作用，因为您使用了v-if指令； 它在满足条件时注入 html 或组件。 使用v-show它只是将 css “ display:none ” 内联到 “ display:block ”

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

当您使用v-if ，该元素不会在 dom 上呈现。 它不适用于 jquery 选择器来选择该元素这是工作示例

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'
}); 

Answer 2

这是您可以在 VueJS 组件中使用其他插件的方式：

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