时间戳

首页 > 解决方案 > 如何通过单击显示/隐藏 v-loop 中的每个元素？

javascript - 如何通过单击显示/隐藏 v-loop 中的每个元素？

问题描述

我有一个表格，其中包含应该可用于编辑的字段。例如：

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

当我单击编辑按钮时，我应该得到输入字段并保存按钮而不是编辑按钮。当我点击保存按钮时，我应该发送 axios 请求并显示加载器微调器，直到 axios 请求完成。而且我需要能够同时显示所有输入。我的意思是如果我点击下一个字段进行编辑，以前的输入也应该显示。知道怎么做吗？

标签： javascriptvue.js

解决方案

如果您可以添加一些键，items那么您可以这样做：

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

export default {
  data() {
      return {
        items:[
          {
            value: foo,
            edit: false,
            loading: false
          },
          {
            value: bar,
            edit: false,
            loading: false
          }
        ]
      }
    },
  methods: {
    handleEdit(item) {
      item.edit = true
    },
    handleSave(item) {
      item.edit = false
      item.loading = true
      axios.post(url, params)
        .then(function(response) {
          item.loading = false
        })
        .catch(function(error) {
          item.loading = false
        })
    }
  }
}

推荐阅读