在 v-for 项目的子 DOM 元素上切换隐藏

Question

例如，这里是模板：

<template>
    <table class="table table-hover">
        <tbody>
            <tr>
                <th style="width:260px">Info</th>
                <th>Details</th>
                <th>Actions</th>
            </tr>
            <tr v-for="(item, index) in items">
                <td>
                    <div>
                        <span class="hover-on-click-input">{{item.content.name}}</span>
                        <input class="form-control hidden" type="text" :value="item.content.name" @blur="updateInfo(item, 'author', $event.target.value)">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</template>

items for v-for 在页面加载后动态加载。

什么是 Vue2.js 在 span 上单击以隐藏它并取消隐藏输入元素的最佳方法，而如果在此之后单击页面上的任意位置（或输入失去焦点）输入再次切换回隐藏并 span未隐藏？输入的正值将被发送到服务器。

我已经红了这个：https://vuejs.org/v2/guide/list.html
还有这个：https://vuejs.org/v2/guide/class-and-style.html

问题是这里的v-for项是<tr>。不是 <span> 或 <input>，但需要将更改应用于 <span> 和 <input> 元素。所以我们可以说 "item's DOM child elements".

谢谢。

Answer 1

为每个 item 添加一个 editing 属性。那么

<span class="hover-on-click-input" @click="item.editing = true">{{item.content.name}}</span>
<input v-if="item.editing" class="form-control hidden" type="text" :value="item.content.name" @blur="updateInfo(item, 'author', $event.target.value)">

并在updateInfo中设置item.editing = false。

在 v-for 项目的子 DOM 元素上切换隐藏

Toggle hide on v-for item's child DOM element

javascript

vue.js

vue-component

vuejs2