12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <template>
- <div id="search" class="col-11">
- <form class="search-form">
- <label for="keys">Search</label>
- <input
- id="keys"
- v-model="keys"
- type="text"
- placeholder="search"
- @keydown.enter.prevent="submit"
- >
- <span
- v-if="!isloading"
- class="mdi mdi-magnify"
- title="rechercher"
- @click.prevent="submit"
- @keydown.enter.prevent="submit"
- />
- <span
- v-else
- class="mdi mdi-loading"
- title="chargement"
- />
- <!-- <input
- id="submit-search"
- type="submit"
- name="search"
- value="Search"
- class="mdi mdi-magnify"
- @click.prevent="submit"
- @keyup.enter="submit"
- > -->
- </form>
- </div>
- </template>
- <script>
- import { mapActions, mapState } from 'vuex'
- export default {
- name: 'Search',
- // data: () => ({
- // typed: ''
- // }),
- computed: {
- keys: {
- get () { return this.$store.state.Search.keys },
- set (value) { this.$store.commit('Search/setKeys', value) }
- },
- ...mapState({
- isloading: state => state.Search.isloading
- })
- },
- methods: {
- ...mapActions({
- getResults: 'Search/getResults'
- }),
- submit () {
- console.log('submited', this.keys)
- this.getResults()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|