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表示在加载页面后动态加载v-for。

使用跨度上的Vue2.js单击以隐藏它并取消隐藏输入元素的最佳方法是什么？如果之后点击页面上的任何位置（或输入丢失的焦点）输入切换回再次隐藏并跨越未隐藏？加上输入值将发送到服务器。

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

问题是这里v-for的项目是<tr>。不是<span>或<input>，但需要将更改应用于<span>和<input>元素。所以我们可以对“item的DOM子元素”说。

感谢。

Answer 1

为每个editing添加item属性。然后

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

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

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

1 个答案: