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