vue-simple-suggest
vue-simple-suggest copied to clipboard
@click listener within misc-item slot
I'm submitting a ...
- [ ] bug report
- [ ] feature request
- [X] support request
What is the current behavior?
Unable to get @click listeners to work within misc-item-* slots. When clicking there it just closes the list.
I've tried @click.stop and prevent here also.
I've got around it by using hacky @focus.stop="myMethod" instead.
Is there a way to listen to clicks within misc-item slots?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
<div slot="misc-item-below">
<div @click="enterManually">Enter address manually</div>
</div>
...
methods: {
enterManually () {
console.log('click event worked');
}
}
What is the expected behavior?
Click handler should fire. List closing etc. can be done in handler.
How are you importing Vue-simple-suggest?
- [X] ESNext (original code, single-file .vue component, css included) (
import VueSimpleSuggest from 'vue-simple-suggest/lib') - [ ] ES6 (
import VueSimpleSuggest from 'vue-simple-suggest') - [ ] ES7 and above (
import VueSimpleSuggest from 'vue-simple-suggest/dist/es7') - [ ] Bundled version (
import VueSimpleSuggest from 'vue-simple-suggest') - [ ] CommonJS (
const VueSimpleSuggest = require('vue-simple-suggest')) - [ ] UMD Component (
<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)
What is the motivation / use case for changing the behavior?
I'm using vue-simple-suggest to search addresses (similar to google maps autocomplete). If an address can't be found after a few keystrokes I need show an option to switch to a manual address input form.
Please tell us about your environment:
- Vue.js Version: 2.6.11
- Vue-simple-suggest version: 1.10.4
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
- Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]
- Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
Same problem for me, custom template closes.
<template slot="misc-item-above" slot-scope="{ suggestions, query }" v-if="newItem.length > 0">
<div v-show="suggestions.length === 0" @click="submit">
<p class="misc-select">{{ newItem }} : click to create</p>
</div>
</template>
@tobyj
hacky @focus.stop="myMethod" instead.
I'm having trouble with the same problem right now. If you don't mind, can you tell me exactly how to do it?