40 lines
934 B
Vue
40 lines
934 B
Vue
<template>
|
|
<form autocomplete="off">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" :placeholder="placeholder" v-model="query" @keyup.enter="onEnter">
|
|
<slot name="append"></slot>
|
|
<button class="btn btn-outline-primary" type="button" @click="onClick">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
placeholder: String,
|
|
searchCallback: Function
|
|
},
|
|
data() {
|
|
return {
|
|
query: "",
|
|
disabled: false
|
|
};
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
this.disabled = true;
|
|
this.searchCallback(this.query);
|
|
this.disabled = false;
|
|
},
|
|
onEnter() {
|
|
this.disabled = true;
|
|
this.searchCallback(this.query);
|
|
this.disabled = false;
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|