CODEWITHSUNDEEP
vue.js
Errol Boneo
Errol Boneo

Reputation: 57

How to delete an item from a dropdown list without calling the change event of the dropdowns event in vue

Question? How do you delete an item by index without calling an unwanted event. I have a dropdown list with change event for selecting item in a dropdown list and when I added a delete button for deleting a specific index the change event also fires before the click event for deleting the item which is in this case the only event I want to call. Any thoughts? Thanks!

<a-form-item class="category" v-decorator="['category']" >
    <a-select placeholder="Select Product Category" @change="selectCategory($event, show_1_product.id)">
    <div slot="dropdownRender" slot-scope="menu">
        <v-nodes :vnodes="menu" />
        <a-divider style="margin: 4px 0;" />
        <div
        style="padding: 6px 10px; cursor: pointer;"
        @mousedown="e => e.preventDefault()"
            data-toggle="modal" data-target="#addCategory" 
        >
        +  Add New Category
        </div>
    </div>
    <a-select-option value="0">
        ...
    </a-select-option>
    <a-select-option v-for="cat in show_category" :value="cat.id" :key="cat.id" class="d-flex justify-content-between">
        <span>{{cat.category_name}}</span> <div><button @mousedown="e => e.preventDefault()" @click="deleteOption(cat.id)">x</button></div>
    </a-select-option>
    </a-select>
</a-form-item>

This is the code I put in to call the delete function by a click event

<a-select-option v-for="cat in show_category" :value="cat.id" :key="cat.id" class="d-flex justify-content-between">
    <span>{{cat.category_name}}</span> 
    <div>
        <button @mousedown="e => e.preventDefault()" @click="deleteOption(cat.id)">x</button>
    </div>

Upvotes: 1

Views: 242

Answers (1)

dako
dako

Reputation: 1163

You need to stop the click event from bubbling up the DOM tree. You can use the modifiers in vue and just chain a simple .stop after your @click event:

@click.stop="deleteOption(cat.id)"

You can learn more about the event modifiers in the docs

Upvotes: 1

Related Questions