Javascript 如何通过单击显示/隐藏v循环中的每个元素？

我有一个表，其中的字段应该可以编辑。 例如：

<tr v-for="item in items">
     <td>
         //show by default and hide when edit button clicked
         <span>{{item.value}}</span>

         //show by click on edit button
         <b-input :value="item.value"></b-input>
     </td>

     <td>
         //edit button (show input field)
         <span class="icon is-small" v-on:click="">
            <i class="fa fa-edit"></i>
         </span>

         //save button (call function with axios)
         <span class="icon is-small" v-on:click="">
            <i class="fa fa-save"></i>
         </span>

         //loader (show until the axios request is complete)
         <span class="icon is-small">
            <i class="fa fa-pulse fa-spinner"></i>
         </span>
     </td>
</tr>

//单击“编辑”按钮时默认显示和隐藏
{{item.value}}
//通过单击“编辑”按钮显示
//编辑按钮（显示输入字段）
//保存按钮（使用axios调用功能）
//加载程序（在axios请求完成之前显示）

当我点击编辑按钮，我应该得到输入字段和保存按钮，而不是编辑按钮。当我点击保存按钮时，我应该发送axios请求并显示loader微调器，直到axios请求完成。 我需要能够同时显示所有输入。我的意思是，如果我点击下一个字段进行编辑，以前的输入也应该显示出来。

---

你知道怎么做吗？

如果你能为

项目添加一些键，那么你可以这样做：

<tr v-for="item in items">
     <td>
         //show by default and hide when edit button clicked
         <span v-if="!item.edit">{{item.value}}</span>

         //show by click on edit button
         <b-input :value="item.value" v-else></b-input>
     </td>

     <td>
         //edit button (show input field)
         <span class="icon is-small" v-on:click="handleEdit(item)" v-if="!item.edit">
            <i class="fa fa-edit"></i>
         </span>

         //save button (call function with axios)
         <span class="icon is-small" v-on:click="handleSave(item)" v-else>
            <i class="fa fa-save"></i>
         </span>

         //loader (show until the axios request is complete)
         <span class="icon is-small" v-if="item.loading">
            <i class="fa fa-pulse fa-spinner"></i>
         </span>
     </td>
</tr>

如果可以向
项添加一些键，则可以执行以下操作：

<tr v-for="item in items">
     <td>
         //show by default and hide when edit button clicked
         <span v-if="!item.edit">{{item.value}}</span>

         //show by click on edit button
         <b-input :value="item.value" v-else></b-input>
     </td>

     <td>
         //edit button (show input field)
         <span class="icon is-small" v-on:click="handleEdit(item)" v-if="!item.edit">
            <i class="fa fa-edit"></i>
         </span>

         //save button (call function with axios)
         <span class="icon is-small" v-on:click="handleSave(item)" v-else>
            <i class="fa fa-save"></i>
         </span>

         //loader (show until the axios request is complete)
         <span class="icon is-small" v-if="item.loading">
            <i class="fa fa-pulse fa-spinner"></i>
         </span>
     </td>
</tr>