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

Javascript vue-router vue.js
Mar.06,2021

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 => {
        //
    })

Previous: Laravel MAMP environment installation Horizon error

Next: How to climb the svg of a website or how to use a browser to take it down?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
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-1e8ac9f-1005.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-1e8ac9f-1005.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?