alpine.js 表就地編輯功能

Question

我正在嘗試使用 Alpine.js 使表格列可編輯內聯。 這個想法是有一個“就地編輯”功能，所以當一行被雙擊時，允許內容是可編輯的。 我遇到的問題是單擊單元格時它會激活所有行。

理想的行為是只有點擊的行應該是可編輯的，所有其他的都應該保持不可編輯。

我在這里預覽了這個問題， https://codepen.io/ezeagwulae/pen/ZEKeYGQ

<div x-data="data()" class="p-4">
    <div class="uppercase font-bold">shopping items</div>
    <template x-for="item in items">
        <div>
            <a @click.prevent @dblclick="toggleEditingState" x-show="!isEditing" x-text="item.item" class="select-none cursor-pointer underline font-lg text-blue-500"></a>
            <input type="text" x-model="text" x-show="isEditing" @click.away="toggleEditingState" @keydown.enter="disableEditing" @keydown.window.escape="disableEditing" class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 appearance-none leading-normal w-128" x-ref="input">
        </div>
    </template>
</div>

Answer 1

在您的 JS 文件中，確保使用 e.target 獲取雙擊的輸入字段。

在您的 HTML x-model 中應該設置為 item.item。 這是一個工作示例。

HTML

<div x-data="data()" class="p-4">
    <div class="uppercase font-bold">shopping items</div>
    <template x-for="item in items">
        <div>
            <a @click.prevent @dblclick="toggleEditingState" x-show="!isEditing" x-text="item.item" class="select-none cursor-pointer underline font-lg text-blue-500"></a>
            <input type="text" x-model="item.item" x-show="isEditing" @click.away="toggleEditingState" @keydown.enter="disableEditing" @keydown.window.escape="disableEditing" class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 appearance-none leading-normal w-128" x-ref="input">
        </div>
    </template>
</div>

JS

function data() {
    return {
        text: "Double click to edit",
        isEditing: false,
        toggleEditingState(e) {
            const el = e.target
            this.isEditing = !this.isEditing;

            el.focus()
        },
        disableEditing() {
            this.isEditing = false;
        },
        items: [
            { id: 1, item: "apple" },
            { id: 2, item: "eggs" },
            { id: 3, item: "milk" }
        ]
    };
}

有什么建議可以只編輯單擊的行而不是所有行？ 例如，如果是“eggs”，則該行應顯示輸入字段，而其他行應保持原樣

例如像這樣：

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.xx/dist/alpine.js"></script> <div x-data="{ items: [ { id: 1, item: 'apple', edit: false }, { id: 2, item: 'eggs', edit: false }, { id: 3, item: 'milk', edit: false }, ] }" class="p-4" > <div class="uppercase font-bold">shopping items</div> <template x-for="(item, index) in items"> <div> <a @click.prevent @dblclick=" item.edit = true; $nextTick(() => $refs[item.id].focus()); " @click.away="item.edit = false" x-show="!item.edit" x-text="item.item" class=" select-none cursor-pointer underline font-lg text-blue-500 " ></a> <input type="text" x-model="item.item" x-show="item.edit" @click.away="item.edit = false" @keydown.enter="item.edit = false" @keydown.window.escape="item.edit = false" class=" bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 appearance-none leading-normal w-128 " :x-ref="item.id" /> </div> </template> </div>