How to encapsulate select plug-in into Vue2.0 component in bootstrap

In this article Xiaobian introduces in detail "how the select plug-in in bootstrap is encapsulated into Vue2.0 components", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how the select plug-in in bootstrap is encapsulated into Vue2.0 components" can help you solve your doubts.

Html

Js

/ / select plug-in Vue.component ('vm-select', {props: [' options', 'value',' multiple', 'method',' load', 'index',' childidx'], template: "{{option.label}}", mounted: function () {var vm = this; $(this.$el) .selectpicker ('val', this.value! = null? This.value: null); $(this.$el) .on ('changed.bs.select', function () {vm.$emit (' input', $(this). Val ()); if (typeof (vm.method)! = 'undefined') {vm.method (vm.index, vm.childidx, this.value);}}) (this.$el) .on ('show.bs.select', function () {if (typeof (vm.load)! =' undefined') {vm.load (vm.index, vm.childidx);}});}, updated: function () {$(this.$el) .selectpicker ('refresh');}, destroyed: function () {$(this.$el) .selectpicker (' destroy');}})

I have to mention that when using multiple select, when deleting a selcet object, the loaded value will change. After a long time, it is found that it is the problem of vue itself: because the vue object will reuse the same vue object in the process of re-rendering the html, it will lead to the dislocation of the selcet object. Solution: label each select object key. Although it may lead to performance degradation, it does not cause errors.

After reading this, the article "how to package select plug-ins in bootstrap into Vue2.0 components" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.