1

Is there a way to make this happen by id through the URL? And how do I set it up that the information that populates on the second page is only by that id number? Having a major braindead moment

   <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
      })
    }
  }
}
Dan
  • 59,490
  • 13
  • 101
  • 110
  • @Dan I had to move it over here because that old work email was just shut down... –  Feb 24 '20 at 18:38

1 Answers1

0

You'll need to pass the id as a prop so that the 2nd view can use a different API call to retrieve a prize (price?) by id. The detail view should look something like this:

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
    })
  }
}

You can pass that id prop in the router-link from the main list like this:

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

This passes the id as part of the route's path (known as a param). Just make sure that the route definition for the PriceDetail route expects params, and also turns them into props (using props: true), which you can do like this:

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

And you need to make sure that your backend is configured to serve up individual data when a route like http://localhost:3000/prizebyid/1000 is visited.

If you want to make it more slick, you can serve up all results when visiting http://localhost:3000/prizes, and individual results when serving http://localhost:3000/prizes/1000, using the prizes route for both. I just used prizebyid route in my example for clarity since it might be easier to configure in the backend at first.

Dan
  • 59,490
  • 13
  • 101
  • 110
  • The slicker option is what I'm trying to accomplish –  Feb 24 '20 at 20:00
  • Yup, you can use that instead. That's probably a different question than this, since i'm focusing on answering your question about the frontend and passing id around – Dan Feb 24 '20 at 20:57
  • I think that'll be the way to go. I just need to figure out the BE setup and this should do the trick. –  Feb 24 '20 at 21:12
  • That's a more elegant design. Syntax will depend on which backend tech you're using. Link me here if you ask a new question about that, if you want – Dan Feb 24 '20 at 21:17
  • I'm still having problems trying to route that way. I'm using Node/Express on the backend and Mongodb –  Feb 24 '20 at 23:33
  • I'm trying to avoid answering too many things in one post and this one is a bit cluttered with frontend stuff already. If you'd like to start a new post about how to form the backend, you can link me – Dan Feb 24 '20 at 23:38
  • This is the link https://stackoverflow.com/questions/60385684/having-issues-pulling-data-from-my-database-and-populating-it-byid-onto-the-my –  Feb 24 '20 at 23:57
  • Ah, you know what, all route param props will be strings. You can change `prizeId` prop definition to: `prizeId: String` since you'll never be using it as a number like to calculate anything. There's also this but I think it's a bit unnecessary here: https://forum.vuejs.org/t/router-vue-props-type-number-didnt-cast/25774 (LinusBorg's route props resolver function) – Dan Feb 25 '20 at 01:39