單擊文檔上任何位置時，隱藏彈出框

Question

我正在嘗試制作一個帶有項目列表的組件，當我單擊每個項目時，它會顯示一個編輯彈出窗口。 當我再次單擊它時，它會隱藏編輯彈出窗口。 但我也希望能夠單擊文檔上的任意位置並隱藏所有編輯彈出窗口（通過設置edit_item_visible = false）。

我嘗試了v-on-clickaway，但由於我有一個項目列表，因此它將觸發多次。 @click事件將首先觸發，然后clickaway事件將觸發多次，並在顯示后立即將其隱藏。 我也嘗試從外部更改組件的數據，但是沒有運氣。

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',
})

Answer 1

如果希望能夠同時編輯多個項目，則應存儲已編輯項目的列表，而不是全局edit_item_visible標志。

    showEdit(item)
    {
        this.selected = item;
        this.editing_items.push(item);
    }


    // v-on-clickaway="cancelEdit(item)"
    cancelEdit(item)
    {
        let idx = this.editing_items.indexOf(item);
        this.editing_items.splice(idx, 1);
    }