Forked from: asip2k25's Vue.js 2.0 + jQuery Plugin Example #4 (component) View Diff (27) Vue.js 2.0 + jQuery Plugin Example #4 (directive + component) asip2k25 Follow 2017-05-13 11:09:46 License: MIT License Fork0 Fav0 View388 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 67 lines HTML 17 lines CSS 4 lines Vue.js 2.0 + jQuery Plugin Example #4 (directive + component) // forked from asip2k25's "Vue.js 2.0 + jQuery Plugin Example #4 (component)" http://jsdo.it/asip2k25/IFV6 // forked from asip2k25's "Vue.js 1.0 + jQuery Plugin Example #4" http://jsdo.it/asip2k25/2emh // forked from asip2k25's "Vue.js 0.11 + jQuery Plugin Example #4" http://jsdo.it/asip2k25/6cjc // forked from asip2k25's "Vue.js + jQuery Plugin Example #4" http://jsdo.it/asip2k25/itmx var vm; $(function(){ Vue.directive('tokenfield',{ inserted: function(el,binding,vnode){ $(el).tokenfield(); $(el).on('tokenfield:editedtoken',function (e) { Vue.set(vnode.context, binding.expression, $(el).tokenfield("getTokensList", ',')); }).on('tokenfield:createdtoken', function(e){ Vue.set(vnode.context, binding.expression, $(el).tokenfield("getTokensList", ',')); }).on('tokenfield:removedtoken', function(e){ Vue.set(vnode.context, binding.expression, $(el).tokenfield("getTokensList", ',')); }); }, update: function(el,binding){ $(el).tokenfield('setTokens',binding.value); } }); Vue.component('bs-tokenfield',{ props: ['token'], template: '<input id="text-content" class="tag-editor" v-tokenfield="content" v-model="content" type="text">', data: function(){ return { content: arguments[0], is_changing: false}; }, watch: { content: function(content){ this.is_changing = true; } }, mounted: function(){ } }); vm = new Vue({ el: '#form', data: { contents: [ { content2: '', content3: 'wi' }, { content2: '', content3: 'fi' } ] }, methods: { on_click: function () { this.contents.push({ content2:'', content3:'' }); }, on_click2: function(row,index){ if(this.$refs.token[index].is_changing){ row.content3 = this.$refs.token[index].content; } row.content2 = row.content3; } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet" /> <div id="form"> <div v-for="(row,index) in contents"> <bs-tokenfield v-model="row.content3" ref="token"></bs-tokenfield> <p> <button id="btn-log" v-on:click="on_click2(row,index)">Check VM.content</button> </p> <p>{{row.content2}}</p> </div> <p> <button id="btn-change" v-on:click="on_click">Add Content by JS</button> </p> </div> Vue.js 2.0 + jQuery Plugin Example #4 (directive + component) .form-control{ border: solid 1px #ccc; border-radius: 3px; } // forked from asip2k25's "Vue.js 2.0 + jQuery Plugin Example #4 (component)" http://jsdo.it/asip2k25/IFV6 // forked from asip2k25's "Vue.js 1.0 + jQuery Plugin Example #4" http://jsdo.it/asip2k25/2emh // forked from asip2k25's "Vue.js 0.11 + jQuery Plugin Example #4" http://jsdo.it/asip2k25/6cjc // forked from asip2k25's "Vue.js + jQuery Plugin Example #4" http://jsdo.it/asip2k25/itmx var vm; $(function(){ Vue.directive('tokenfield',{ inserted: function(el,binding,vnode){ $(el).tokenfield(); $(el).on('tokenfield:editedtoken',function (e) { Vue.set(vnode.context, binding.expression, $(el).tokenfield("getTokensList", ',')); }).on('tokenfield:createdtoken', function(e){ Vue.set(vnode.context, binding.expression, $(el).tokenfield("getTokensList", ',')); }).on('tokenfield:removedtoken', function(e){ Vue.set(vnode.context, binding.expression, $(el).tokenfield("getTokensList", ',')); }); }, update: function(el,binding){ $(el).tokenfield('setTokens',binding.value); } }); Vue.component('bs-tokenfield',{ props: ['token'], template: '<input id="text-content" class="tag-editor" v-tokenfield="content" v-model="content" type="text">', data: function(){ return { content: arguments[0], is_changing: false}; }, watch: { content: function(content){ this.is_changing = true; } }, mounted: function(){ } }); vm = new Vue({ el: '#form', data: { contents: [ { content2: '', content3: 'wi' }, { content2: '', content3: 'fi' } ] }, methods: { on_click: function () { this.contents.push({ content2:'', content3:'' }); }, on_click2: function(row,index){ if(this.$refs.token[index].is_changing){ row.content3 = this.$refs.token[index].content; } row.content2 = row.content3; } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet" /> <div id="form"> <div v-for="(row,index) in contents"> <bs-tokenfield v-model="row.content3" ref="token"></bs-tokenfield> <p> <button id="btn-log" v-on:click="on_click2(row,index)">Check VM.content</button> </p> <p>{{row.content2}}</p> </div> <p> <button id="btn-change" v-on:click="on_click">Add Content by JS</button> </p> </div> .form-control{ border: solid 1px #ccc; border-radius: 3px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author asip2k25 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/28zg/js"></script> html5_elements&api Discussion Questions on this code? Tags html5_elements&api
