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

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

我有一个表，其中包含应可编辑的字段。例如:

<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 请求完成。我需要能够同时显示所有输入。我的意思是，如果我单击下一个字段进行编辑，以前的输入也应该显示。知道如何做到这一点吗？

Answer 1

如果您可以向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
        })
    }
  }
}