Here's an example of a 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 are loaded dynamically after the page has been loaded.
What is the best way with Vue2.js to hide the span element and show the input element when the span is clicked? Then if anywhere on the page is clicked (or the input loses focus), toggle the input back to hidden and unhide the span again. Plus, the value of the input will be sent to the server.
I have already read this: https://v2.vuejs.org/v2/guide/list.html
And this: https://v2.vuejs.org/v2/guide/class-and-style.html
The challenge here is that the item of the v-for loop is a <tr>, not a <span> or <input>, but changes need to be applied to the <span> and <input> elements. We can refer to these as "item's DOM child elements".
Thank you.