时间戳

首页 > 解决方案 > 我正在尝试使用第一个视图中的路由器链接按钮中的 id 数据填充第二个视图。不确定我是否应该通过 BaseURL

javascript - 我正在尝试使用第一个视图中的路由器链接按钮中的 id 数据填充第二个视图。不确定我是否应该通过 BaseURL

问题描述

有没有办法通过 id 通过 URL 实现这一点？以及如何设置第二页上填充的信息仅由该 ID 号？有一个重大的脑死亡时刻

   <div v-for="prize in prizes" :key="prize.name">
     <div class="card_individual">
       <div class="card-media-container">
         <img class="card_image" src="../assets/c5Cor.jpg" alt="people"/></div>
        <div class="card-detail-container">
          <div class="card_title">Win a {{ prize.name }}</div>
        </div>
        <div class="modal-footer">
          <router-link :to="{ name: 'PriceDetail'}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
        </div>
      </div>
    </div>

<script>
import axios from 'axios'
export default {
  name: 'Prizes',
  data () {
    return {
      prizes: [],
    }
  },
  mounted () {
    this.getPrizes()
  },
  methods: {
    getPrizes () {
      axios.get('http://localhost:3000/prizes').then(response => {
        this.prizes = response.data.prizes
        this.id = response.data.prizes.id
      })
    }
  }
}

标签： javascriptvue.jsvuejs2axiosvue-router

解决方案

您需要将 id 作为道具传递，以便第二个视图可以使用不同的 API 调用通过 id 检索奖品（价格？）。详细视图应如下所示：

props: {
  prizeId: Number
},
data () {
  return {
    prize: {},
  }
},
mounted () {
  this.getPrizeById()
},
methods: {
  getPrizeById() {
    axios.get('http://localhost:3000/prizebyid/' + this.prizeId).then(response => {
      this.prize = response.data.prize
    })
  }
}

您可以像这样在主列表中的 router-link 中传递该 id 属性：

<router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}">

这会将 id 作为路由路径的一部分（称为参数）传递。只需确保路由的路由定义PriceDetail需要参数，并将它们转换为道具（使用props: true），您可以这样做：

{ path: '/<your-path>/:prizeId', name: 'PriceDetail', props: true }

并且您需要确保您的后端配置为在访问http://localhost:3000/prizebyid/1000 之类的路由时提供个人数据。

如果你想让它更流畅，你可以在访问 http://localhost:3000/prizes 时提供所有结果，在访问http://localhost :3000/prizes/1000时提供单个结果，使用prizes两者的路由。为了清楚起见，我只是prizebyid在示例中使用了路由，因为一开始在后端配置可能更容易。

推荐阅读