将索引引用到 html 中的方法。 Vue.js

Posted 2023-02-23

【中文标题】将索引引用到 html 中的方法。 Vue.js

【英文标题】：Referencing index to a method that's in html. Vue.js

【发布时间】：2021-04-03 06:40:26

【问题描述】：

我正在尝试将 <tr v-for="(note, index) in noteList" v-bind:key="index" 中的“索引”引用到 shareToPublic(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>

【参考方案1】：

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

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

在selectedId 处理程序中将selected 设置为id：

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

传递@click中的id而不是索引：

@click="selectedId(note.id)"

将selected 用于路由器推送中的id：

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