alpine.js table 就地编辑功能

Question

我正在尝试使用 Alpine.js 使 table 列 editable 内联。这个想法是有一个“就地编辑”功能，所以当双击一行时允许内容被编辑table。我遇到的问题是单击单元格时它会激活所有行。

理想的行为是只有被点击的行应该是 editable，所有其他的应该保持 uneditable。

我在这里预览了这个问题，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" }
        ]
    };
}

Any suggestions to make only the clicked row editable and not all rows? For instance, if "eggs" the input field should be shown for this row and the other rows should remain as is

例如像这样：

<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>

alpine.js table 就地编辑功能

alpine.js table edit-in-place functionality

html

javascript

html-table

alpine.js