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

Question

For example, here is template:

<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 loaded dynamically after page has been loaded.

What is the best way with Vue2.js on span click to hide it and unhide input element, while if after that clicked anywhere on the page(or input lost focus) input toggle back to hidden again and span unhidden? Plus value of input will be send to server.

I already red this: https://vuejs.org/v2/guide/list.html
And this: https://vuejs.org/v2/guide/class-and-style.html

The problem is that item of v-for here is <tr>. Not <span> or <input>, but changes need to be applied to <span> and <input> element. So we can say to "item's DOM child elements".

Thanks.

Bert Bert · Accepted Answer · 2017-03-28T00:49:40

Add an editing property to each item. Then

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

And set item.editing = false in updateInfo.

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

1 Answers