Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about what the value of Vue.js monitoring select2 changes to query. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Listen for changes in the value of select2 for query

Since the front-end project uses Vue.js and bootstrap integrated development, and the select2 drop-down box is used in the middle, today, when making a query, you want to listen to the query according to the change of the value of the drop-down box, as follows:

The select2 component rule setting reminder settings are referenced on the page and the following code is introduced in js: Vue.directive ('select2', {inserted: function (el, binding, vnode) {let options = binding.value | | {}; $(el) .select2 (options) .on ("select2:select", (e) = > {el.dispatchEvent (new Event (' change', {target: e.target}) Update: function (el, binding, vnode) {for (var I = 0; I < vnode.data.directives.length; ibind +) {if (vnode.data.directives.name = = "model") {$(el) .val (vnode.data.directivesi] .value) } $(el) .trigger ("change");}}); used in the vue instance, test var vm = new Vue ({el:'# app', data: {ruleAndRemindType: 'rule'}, methods: {/ / initial execution init () {this.getList (' rule')) }, getChange: function (ruleAndRemindType) {this.getList (ruleAndRemindType);}, getList: function (ruleAndRemindType) {alert (ruleAndRemindType);},}, mounted () {setTimeout (function () {vm.init ();}, 50)}})

Because the change of the monitoring value is used for dynamic query, the query data can find this method, and it is feasible to test it.

Events {{name}} of Vue listening on select

Vue code

Var vm = new Vue ({el:'# container', data: {}, methods: {findItemNameBYClass:function (e) {console.log (e.target.value)}) these are all the contents of the article "what is the value change of Vue.js listening select2 to query?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.