typescript - 引用 html 中的方法的索引。Vue.js

Question

我正在尝试引用shareToPublic(index)<tr v-for="(note, index) in noteList" v-bind:key="index"中的“索引” 。selectedID()方法选择索引并返回当前 ID 号。之后，当我单击“共享”按钮时，它应该将我带到一个页面，该页面显示从 ID 中选择的内容。

<template>
  <div>
    <button class="btn-delete" @click="shareToPublic(index)">Share</button>    
    <tbody>
      <tr v-for="(note, index) in noteList"
        v-bind:key="index"
        v-if="note.workspace_id === currentWorkspace"
        @dblclick="getNote(note.id)"
        @click="selectedId(index)" >
        <td>{{ note.title }}</td>
        <button type="submit" @click="deletePage(note.id, index)">Delete</button>
      </tr>
  </div>
</template>

<script lang="ts">
  @Componet
  export default class ValueHub extends Vue {
  
    private selectedId(index: number): number {
      return this.noteList[index].id
    }
  
    async shareToPublic(index: numbrer){
      const numberToString = this.selectedId(index).toString()
      await this.$router.push({name: 'PublicContent', params: {id: numberToString}});
    }
  }
</script>

Answer 1

假设问题不是拼写错误或缺少代码nodeList等，请创建一个名为selected存储所选id（不是索引）的变量：

export default class ValueHub extends Vue {
  selected: number | null = null;  // Will contain the selected id
  ...
}

在处理程序中设置selected为：idselectedId

private selectedId(id: number) {
  this.selected = id;
}

传递 id 而不是索引@click：

@click="selectedId(note.id)"

用于路由器推送selected：id

async shareToPublic(){
  await this.$router.push({
    name: 'PublicContent',
    params: { id: this.selected }
  });
}