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>