查看您分享的小提琴链接后，我得出了以下观察结果/根本原因 ：

• 您正在使用两个参数（row，index）调用 deleteRow 方法，但在方法定义中，您只接受 index ，这导致删除记录时出现问题。

  要解决此问题，您只需从模板中的 deleteRow 方法中传递索引即可。

• 另一个观察结果是，当您在 rowCssDecorations 方法中传递 row 和 index 时。因此，不需要 currentRowIndex ，您可以直接在 rowCssDecorations 方法中使用 index 。

现场演示 ：

new Vue({
  el: '#app',
  data: {
    rows: [{
        'id': 1,
        text: 'Granny smith',
        type: 'apple'
      },
      {
        'id': 2,
        text: 'Conference',
        type: 'pear'
      },
      {
        'id': 3,
        text: 'Alpine',
        type: 'strawberry'
      }
    ],
    currentRowIndex: 0
  },
  methods: {
    deleteRow(index) {
      this.rows.splice(index, 1)
    },
    
    rowCssDecorations(row, index) {
      var resultingCss = ''

      //change color according to rows.type
      switch (row.type) {
        case 'apple':
          resultingCss = resultingCss + 'appleClass'
          break
        case 'pear':
          resultingCss = resultingCss + 'pearClass'
          break
        case 'strawberry':
          resultingCss = resultingCss + 'strawberryClass'
          break

        default:
          resultingCss = resultingCss + 'defaultClass'
          break
      }

      //Hliglight the current row
      if (this.rows[index].id == row.id) {
        resultingCss = resultingCss + ' borderSelected '
      } else {
        resultingCss = resultingCss + ' borderNormal  '
      }

      return resultingCss
    },

    //deletes the row
    deleteRow(index) {
      this.rows.splice(index, 1)
    }
  }
})

.appleClass {
   background-color: greenyellow;
 }

 .pearClass {
   background-color: palegoldenrod;
 }

 .strawberryClass {
   background-color: red;
 }

 .defaultClass {
   background-color: gainsboro;
 }

 .borderSelected {
   border-color: black;
   border-width: 4px;
 }

 .borderNormal {
   border-color: black;
   border-width: 2px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(row, index) in this.rows" :key="index" v-bind:id="`row-${index}`">
    <div v-bind:id="`row-${index}`" v-bind:class="rowCssDecorations(row, index)">
      <span>{{ row.text }}</span> <button class="borderNormal" @click.prevent="deleteRow(index)">Delete me</button>
    </div>
  </div>
</div>

您应该使用 @click.stop 而不是 @click.prevent