- Notifications
You must be signed in to change notification settings - Fork 33.7k
/
Copy pathindex.html
84 lines (79 loc) · 2.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Vue.js wrapper component example (jquery plugin: select2)</title>
<!-- Delete ".min" for console warnings in development -->
<scriptsrc="../../dist/vue.min.js"></script>
<scriptsrc="https://unpkg.com/jquery"></script>
<scriptsrc="https://unpkg.com/select2@4.0.3"></script>
<linkhref="https://unpkg.com/select2@4.0.3/dist/css/select2.min.css" rel="stylesheet">
<style>
html,body {
font:13px/18px sans-serif;
}
select {
min-width:300px;
}
</style>
</head>
<body>
<divid="el">
</div>
<!-- using string template here to work around HTML <option> placement restriction -->
<scripttype="text/x-template" id="demo-template">
<div>
<p>Selected: {{ selected }}</p>
<select2 :options="options" v-model="selected">
<optiondisabledvalue="0">Select one</option>
</select2>
</div>
</script>
<scripttype="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
<script>
Vue.component('select2',{
props: ['options','value'],
template: '#select2-template',
mounted: function(){
varvm=this
$(this.$el)
.val(this.value)
// init select2
.select2({data: this.options})
// emit event on change.
.on('change',function(){
vm.$emit('input',this.value)
})
},
watch: {
value: function(value){
// update value
$(this.$el).val(value).trigger('change')
},
options: function(options){
// update options
$(this.$el).select2({data: options})
}
},
destroyed: function(){
$(this.$el).off().select2('destroy')
}
})
varvm=newVue({
el: '#el',
template: '#demo-template',
data: {
selected: 0,
options: [
{id: 1,text: 'Hello'},
{id: 2,text: 'World'}
]
}
})
</script>
</body>
</html>
