添加vue js后选择2不工作答案

【问题标题】：Select 2 not working after adding vue js添加vue js后选择2不工作
【发布时间】：2018-01-13 18:28:35
【问题描述】：

我不知道为什么，但是 select2 仅通过添加 vue js 不起作用。尝试了很多东西，比如搜索，但没有解决方案。当我删除 vue 时它可以工作，而当我添加它时，为什么首先会发生这种情况。

这是它的工作示例。

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>               
 <script src='https://unpkg.com/vue@2.5.13/dist/vue.js'></script>

<div id='app'>
<select id="asd" name="asd" class="asd"><option value="1">001 - Środki trwałe x</option><option value="2">001-001 - Środek trwały 1 </option><option value="3">001-002 - Środek trwały 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select>
</div>

而javascript代码是

$(document).ready(function() {
    $(".asd").select2();
    new Vue({el: '#app'});
});

或者我还创建了 js fiddle 来现场演示它，我们可以在这里看到它。

http://jsfiddle.net/8349tck1/39/

我不知道为什么会这样，但这对我来说有点奇怪。

谢谢。我希望我能解决这个奇怪的问题。真奇怪。

【问题讨论】：

标签： vuejs2 jquery-select2

【解决方案1】：

Vue 有自己的生命周期，mouted 部分表示 dom 已经加载完毕。

new Vue({
   el: '#app',
   mounted:function(){
   //use your select2 plugin in vue's mounted period
   $(".asd").select2();
  }

});

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。
Vue的文档对你很有帮助也很友好。请google后提问。

【解决方案2】：

其实在搜索了很多之后，我发现 vue js 对 dom 太饿了，它无法识别 jQuery 所采取的操作，所以它会在每个生命周期后更改为默认值。因此 select2 不起作用。为了让它工作，我们可以使用这样的代码

$(document).ready(function() {
    $(".asd").select2();
    new Vue({el: '#app'});
});

详细信息 https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

【讨论】：

【解决方案3】：

zyp 的答案是正确答案

但我不得不稍微改变它，因为我的选择 2 加载速度太快，然后安装了 vue。

 new Vue({
     el: '#app',
     mounted:function(){
        setTimeout( function(){
            $(".select2").select2();
        },1000);
      $(".asd").select2();
     }
});

【讨论】：

【解决方案4】：

这是我发现它工作的唯一方法。

const vm = new Vue({
   el: '#app',
   data: {
       selects: {},
   }
   mounted() {
       // don't forget to adjust the selector
       $('#app select').select2().on('change', function() {
           // you need to listen to change event to get the new value to Vue data
           // you don't need to use `selects` attribute. You can change any property in this call.
           vm.selects[$(this).attr('id')] = $(this).val();
       });
   }
});

如果您还想以其他方式更新 select2 选项，也可以添加 watch 属性。

【讨论】：