Vuejs动态移除带有选定图像的行

<template>
  <div>
    <table>
      <tr v-for="(row, index) in imageRows" :key="index">
        <td>
          <img :src="row.imageUrl" alt="Image">
        </td>
        <td>
          <!-- 删除按钮 -->
          <button @click="removeRow(index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageRows: [
        { imageUrl: 'https://example.com/image1.jpg', otherInfo: '其他信息1' },
        { imageUrl: 'https://example.com/image2.jpg', otherInfo: '其他信息2' },
        { imageUrl: 'https://example.com/image3.jpg', otherInfo: '其他信息3' }
      ]
    };
  },
  methods: {
    removeRow(index) {
      this.imageRows.splice(index, 1);
    }
  }
};
</script>