Vue.js 禁用其他 js 插件答案

【问题标题】：Vue.js disabling other js pluginVue.js 禁用其他 js 插件
【发布时间】：2017-02-26 18:30:56
【问题描述】：

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

Snippet

【问题讨论】：

您发布的 JSFiddle 似乎对我有用。实际问题是什么？
它在我的 Laravel 项目中不起作用。两个下拉菜单都被禁用，因为插件包含在 el:#app 中。如果我删除 el:#app 它可以工作。
我可以建议你将 jQuery 的东西初始化到 mounted() 钩子中 - jsfiddle.net/7zLzgh0o 还要确保你已经导入了 jQuery - 类似这样的 import $ from 'jquery'。
好吧，我做到了 jQuery(function($){ "use strict"; var EASY = window.EASY || {}; EASY.Country = function(){ $('.select2-multi').select2(); } EASY.Included = function(){ $("#included").multipleSelect({ placeholder: "What's included ?" }); } $(document).ready(function(){ EASY.Country (); EASY.Included (); }); }); EASY.Country 有效，但 EASY.Included 无效。
搞砸了，我选择了纯 js :D

标签： javascript jquery vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这是在 VueJS 组件中使用其他插件的方法：

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

【讨论】：