Question

我不知道为什么但是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小提琴现场演示我们可以在这里看到它。

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

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

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

Answer 1

Vue拥有自己的生命圈，部分意味着dom已经装满了。

{{1}}

Answer 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/

Answer 3

zyp的答案是正确的答案

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

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

Answer 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属性。

添加vue js后选择2不工作

4 个答案: