添加vue js后选择2不工作

Question

我不知道为什么，但是仅通过添加 vue js 就无法使用 select2。尝试了很多诸如搜索之类的事情，但没有解决方案。当我删除 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/

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

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

Answer 1

实际上，经过大量搜索后，我发现 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/