Question

我在使用v-for动态创建的表格的每一行中都有“编辑并保存”按钮。单击一行中的编辑时，应隐藏所有其他“编辑并保存”按钮，直到保存正在编辑的行。

Answer 1

我创建了一个您描述的结构的简单示例。您可以这样做：

 <template>
  <table>
    <tr v-for="item in someDataRows" :key="item.id">
      <td>{{ item.name }}</td>
      <td>
        <button
          v-show="!nowSavingId || nowSavingId === item.id"
          @click="edit(item.id)">
          Edit
        </button>
      </td>
      <td>
        <button
          v-show="!nowSavingId || nowSavingId === item.id"
          @click="save(item.id)">
          Save
        </button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data () {
    return {
      someDataRows: [
        { id: 1, name: 'First Item'},
        { id: 2, name: 'Second Item'},
        { id: 3, name: 'Third Item'},
        { id: 4, name: 'Fourth Item'}
      ],
      nowSavingId: null
    }
  },
  methods: {
    edit (id) {
      this.nowSavingId = id;
    },
    save () {
      // some save logic here
      // after save just do:
      // this.nowSavingId = null
    }
  }

}
</script>

使用v-show进行div的条件渲染

1 个答案: