The problem of transmitting parameters in vue

now there is a demand like this: click on an item in the commodity list (figure 1), and you will get the id, of the product and then pass it into the commodity details interface (figure 2). After receiving the id of the commodity, the commodity details interface sends a http request to the database according to this id, thus requesting the data, and then taking out the corresponding commodity name, merchandise image, commodity price, thus realizing the style of figure 2.

11

2 figure 2

I use vue,vue-router, to surf the Internet and find some information, but I don"t quite understand how to request data from the database according to the commodity id. I work as a front-end developer, so I want to simulate a database , refer to the Vue simulation data, and route to the product details page , but I don"t quite understand it, and I don"t know how to write it. to write a simple example , the gods help me to see how to write this requirement. Thank you


list page section

<template>
  <div>
      <li v-for="item in list" :key="item.goods_id">
          <router-link :to="{name: 'goods_detail', query: {goods_id: item.goods_id }}">
              <div>
                  <img src="" alt="">
                  <span></span>
              </div>
          </router-link>
      </li>
  </div>
</template>

details page accepts goods_id partial JS

<script>
export default {
  computed:{
      goods_id: function(){
          return this.$route.query.goods_id//URLgoods_id
      }
  }
}
</script>

once you get the goods_id, you can Http to request the product data, and if you don't understand anything, you can bring it up.


you should have seen v-router, learned about programmatic navigation, and how to get parameters from url. Requesting data according to ID means that when you use ajax or axios to send a request to an interface sent to you by the backend, you pass in the ID, and then what data is returned is filtered by the backend according to ID, and then you get the data and write it to the page. If you simulate, you can write your own json data, and then match the data according to id. For loop. If you take a screenshot, you can write it in a json file or directly in js. It is important to note that json is strict with the format, and if there is anything wrong with the format, it will report an error.

clipboard.png


request data from the database according to the commodity id

means to send a http request to the backend

axios.get('/api/goods/' + id)
    .then(response => {
        //
    })
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3110d-2bd6c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3110d-2bd6c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?