如何从子组件Vue Js调用函数删除行

Question

我正在尝试删除点击按钮删除

上生成的行

内部子组件appRows.vue

<span class="btn btn-danger" v-ripple @click="removeRow(data.id)">Delete</span>

但是它不起作用，请帮助我实现这一目标

子组件appRows.vue

<template>
  <tr :id="data.row_id">
    <td>{{ data.id + 1 }}.</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>
      <span class="btn btn-danger" v-ripple @click="removeRow(data.id)">Delete</span>
    </td>
  </tr>
</template>
<script>
export default {
  name: "inpRow",
  props: ["data"]
};
</script>

父项NewApplication.vue

  <template>
              <div>
                <div class="crz-container" id="container" v-cloak>

                  <div class="products mt-2">

                    <table class="table table-bordered table-striped">
                      <thead>
                        <th>№</th>
                        <th>Category</th>
                        <th>Product</th>
                        <th>Count</th>
                        <th>Date</th>
                        <th>Price</th>
                        <th>Percentage</th>
                      </thead>
                      <tbody id="prodtable">
                        <tr
                          v-for="item in tablerows"
                          v-bind:data="item"
                          v-bind:key="item.id"
                          is="inpRow"
                        ></tr>

                        <tr @click="addRow()">
                          <td v-ripple colspan="7" class="text-center addnewrow">
                            <i class="material-icons">add</i>
                          </td>
                        </tr>


                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </template>
<script>
  import inpRow from "@/components/appRows.vue";
export default {
  components: {
    inpRow

  },
  name: "NewApplication",
  data() {
    return {
      tablerows: [{
          id: 0,
          row_id: "row"
        },
        {
          id: 1,
          row_id: "row2"
        }
      ],
      counter: 1,
    }
  }
  methods: {
    addRow: function() {
      this.counter++;
      this.tablerows.push({
        id: this.counter,
        row_id: "row" + this.counter
      });
    },
    removeRow: function(index) {
      console.log("Removing", index);
      this.tablerows.splice(index, 1);
    }
  }
}
</script>