use v-model for dropdown search input
This commit is contained in:
parent
86413c950b
commit
688f53ec7d
1 changed files with 10 additions and 8 deletions
|
@ -3,29 +3,31 @@ import { __ } from '~/locale';
|
|||
|
||||
export default {
|
||||
props: {
|
||||
searchQuery: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
placeholderText: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: __('Search'),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return { searchQuery: this.value };
|
||||
},
|
||||
watch: {
|
||||
searchQuery(query) {
|
||||
this.$emit('input', query);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dropdown-input">
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="dropdown-input-field"
|
||||
type="search"
|
||||
v-model="searchQuery"
|
||||
:placeholder="placeholderText"
|
||||
:searchQuery="searchQuery"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<i
|
||||
aria-hidden="true"
|
||||
|
|
Loading…
Reference in a new issue