mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
52 lines
847 B
Vue
52 lines
847 B
Vue
<template>
|
|
<form @submit.stop="onSubmit">
|
|
<v-select :options="books" label="title" v-model="selected">
|
|
<template #search="{attributes, events}">
|
|
<input
|
|
:required="!selected"
|
|
class="vs__search"
|
|
v-bind="attributes"
|
|
v-on="events"
|
|
/>
|
|
</template>
|
|
</v-select>
|
|
|
|
<input type="submit">
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import books from '../data/books'
|
|
export default {
|
|
data: () => ({
|
|
books,
|
|
selected: null,
|
|
}),
|
|
methods: {
|
|
onSubmit() {
|
|
alert('Submitted!');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
form {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.v-select {
|
|
width: 75%;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
margin-left: 1rem;
|
|
background: #44ae7d;
|
|
border: none;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
width: 20%;
|
|
}
|
|
</style>
|