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

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

1 个答案: