darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

How to add a click handler in a button inside the suggestion item slot ? #228

Open joelr-cm opened 2 years ago

joelr-cm commented 2 years ago

Hello guys,

I was wondering how to add a button and a click handler to it inside the suggestion item slot

Relevant code or config

<vue-autosuggest 
      class="hello"
      :component-attr-id-autosuggest="'hey'"
      :suggestions="suggestions"
      :inputProps="inputProps"
      :sectionConfigs="sectionConfigs"
      :getSuggestionValue="getSuggestionValue"
        >
    <template slot-scope="{suggestion}">
      <div v-if="suggestion.name == 'hotels'">
        <img :class="{ avatar: true }" :src="suggestion.item.thumbnailUrl"/>
        {{suggestion.item.title}}
      </div>
      <div v-else>
        {{suggestion.item.name}}
      </div>
      <button @click="onDelete">delete</button>     // <============= This click handler doesn't work
    </template>
image

Reproduction sandbox/repository: https://codesandbox.io/s/vueautosuggest-base-forked-ld3h4o?file=/App.vue

Problem description: I was wondering how to add a button and a click handler to it inside the suggestion item slot ? The click handler on the "delete" button in my sample code doesn't work

gabsi20 commented 2 years ago

watch this https://github.com/darrenjennings/vue-autosuggest/issues/168#issuecomment-585015240

took me ages to find it