My goal is to create a component that displays a list of items. When I click on an item, it should show an edit popup. Clicking on the item again should hide the edit popup. Additionally, I want to be able to click anywhere on the document to hide all edit popups by setting edit_item_visible to false.
I attempted to use v-on-clickaway, but encountered issues with multiple triggers due to having a list of items. The @click event would trigger first, followed by the clickaway event triggering multiple times and causing the popup to display and then immediately hide. I also tried changing the component's data from outside sources, but this approach was unsuccessful.
Vue.component('item-list', {
template: `
<div>
<div v-for="(item, index) in items" @click="showEdit(index)">
<div>{{ item.id }}</div>
<div>{{ item.description }}</div>
<div v-if="edit_item_visible" class="edit-item">
Edit this item here...
</div>
</div>
</div>
`,
data()
{
return {
items: [],
edit_item_visible: false,
selected: null,
};
},
methods:
{
showEdit(index)
{
this.selected = index;
this.edit_item_visible = !this.edit_item_visible;
}
},
});
const App = new Vue({
el: '#app',
})