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.x.x/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>