naive-ui/demo/documentation/components/select/enUS/events.md

88 lines
1.6 KiB
Markdown
Raw Normal View History

# Change Event
Why change event is an example? Because at first there isn't much to write.
2019-09-25 12:19:57 +08:00
```html
<n-select
v-model="selectedValue"
placeholder="Please Select Type"
:options="options"
@change="handleChange"
/>
<n-select
v-model="selectedArray"
multiple
placeholder="Please Select Type"
:options="options"
@change="handleChange"
/>
```
```js
export default {
data () {
return {
selectedValue: 'song1',
selectedArray: ['song1'],
options: [
{
label: 'Drive My Car',
value: 'song1'
},
{
label: 'Norwegian Wood',
value: 'song2'
},
{
label: 'You Won\'t See',
value: 'song3'
},
{
label: 'Nowhere Man',
value: 'song4'
},
{
2019-09-25 12:19:57 +08:00
label: 'Think For Yourself',
value: 'song5'
},
{
label: 'The Word',
value: 'song6'
},
{
label: 'Michelle',
value: 'song7'
},
{
label: 'What goes on',
value: 'song8'
},
{
label: 'Girl',
value: 'song9'
},
{
label: 'I\'m looking through you',
value: 'song10'
},
{
label: 'In My Life',
value: 'song11'
},
{
label: 'Wait',
value: 'song12'
}
]
}
},
methods: {
handleChange (item) {
2019-09-25 12:19:57 +08:00
this.$NMessage.info('value: ' + JSON.stringify(item))
}
}
}
2019-09-25 12:19:57 +08:00
```
```css
.n-select {
width: 180px;
margin: 0 12px 8px 0;
}
```