Question

我有一个包含所有问题文件ID的对象，我也将这些ID呈现给一个表格。当有人点击Take Exam按钮时，需要什么相关的paperid应该传递给路线。我试过了

this.$router.push('/startExam/{{paperid}}');

和

this.$router.push('/startExam/this.paperid');

但两者都不起作用。如何动态地将数据传递到路由？我的代码在这里。

<tbody>
      <tr v-for="paperid in QuestionPapersArray">
        <td>{{paperid}}</td>
        <td></td>
        <th></th>
        <th><button class="btn" @click="takeExam">Take Exam</button></th>
      </tr>
</tbody>

和

methods:{
    takeExam(){
      console.log("Inside the function");
      this.$router.push('/startExam');
    }
  }

Answer 1

<tbody>
      <tr v-for="paperId in QuestionPapersArray">
        <td>{{ paperId }}</td>
        <td></td>
        <th></th>
        <th><button class="btn" @click="takeExam(paperId)">Take Exam</button></th>
      </tr>
</tbody>

请尝试以下操作。

methods: {
  takeExam (paperId) {
    this.$router.push(`/startExam/${paperId}`)
  }
}

或者，您可以在takeExam()方法

中尝试以下操作

this.$router.push({
  path: '/startExam',
  params: {
    id: paperId
  }
})

您的路线配置文件应为path: '/startExam/:id'

VueJs动态地将数据绑定到路由

1 个答案: