vue 傳參數(shù)的問(wèn)題

現(xiàn)在有一個(gè)需求是這樣的，點(diǎn)擊商品列表的一個(gè)商品（圖1），會(huì)獲取商品的id，然后傳入商品詳細(xì)信息界面（圖2），然后商品詳細(xì)信息界面接收到商品的id之后，根據(jù)這個(gè)id向數(shù)據(jù)庫(kù)發(fā)出http請(qǐng)求，從而請(qǐng)求出數(shù)據(jù)，然后把對(duì)應(yīng)的商品name，商品image，商品price都取出來(lái)，從而實(shí)現(xiàn)圖2的樣式。

圖1

圖2

我用的是vue，vue-router，上網(wǎng)也找了一些資料，但是對(duì)于根據(jù)商品id向數(shù)據(jù)庫(kù)進(jìn)行請(qǐng)求數(shù)據(jù)不太明白。我是做前端開(kāi)發(fā)的，所以想模擬一個(gè)數(shù)據(jù)庫(kù)，參考了這個(gè)Vue模擬數(shù)據(jù)，實(shí)現(xiàn)路由進(jìn)入商品詳情頁(yè)面資料，但是看的不是太懂，具體不知道怎么寫(xiě)，寫(xiě)一個(gè)簡(jiǎn)單的例子也行，大神們幫我看一下怎么寫(xiě)這個(gè)需求，謝謝

回答

編輯回答

乖乖噠

根據(jù)商品id向數(shù)據(jù)庫(kù)進(jìn)行請(qǐng)求數(shù)據(jù)

意思就是向后端發(fā)送http請(qǐng)求嘛

axios.get('/api/goods/' + id)
    .then(response => {
        //后端返回給你商品數(shù)據(jù)
    })

2017年5月26日 07:25

編輯回答

尐潴豬

列表頁(yè)部分

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

詳情頁(yè)接受goods_id部分JS

<script>
export default {
  computed:{
      goods_id: function(){
          return this.$route.query.goods_id//這個(gè)就是頁(yè)面URL上的goods_id
      }
  }
}
</script>

拿到了goods_id就可以進(jìn)行Http請(qǐng)求商品數(shù)據(jù)了，如果哪里不明白的可以提出來(lái)。

2018年7月31日 10:26

編輯回答

淺淺

你應(yīng)該看了v-router了吧，了解了編程式導(dǎo)航，如何從url中獲取參數(shù)。根據(jù)ID請(qǐng)求數(shù)據(jù)是指你使用ajax或者axios向后臺(tái)給你的某個(gè)接口發(fā)送請(qǐng)求的同時(shí)傳入這個(gè)ID，然后返回什么數(shù)據(jù)由后臺(tái)根據(jù)ID篩選，然后你得到數(shù)據(jù)寫(xiě)到頁(yè)面上。模擬的話(huà)可以自己寫(xiě)個(gè)json數(shù)據(jù)，然后根據(jù)根據(jù)id匹配到數(shù)據(jù)。for循環(huán)。如截圖，你可以寫(xiě)在一個(gè)json文件中，或者直接在js里面也行。要注意json對(duì)格式要求嚴(yán)格，如果有什么格式不對(duì)的都會(huì)報(bào)錯(cuò)。

2018年1月18日 01:30