nuxt 請求資料 切換
阿新 • • 發佈:2020-08-07
在api下建立一個新的檔案如test.js,裡面放所有的請求
const baseURL = 'https://xxx.com/' import axios from 'axios' import qs from 'qs'; export function tabdatas(ty=1) { return axios({ headers: { "Content-Type": "application/x-www-form-urlencoded" }, method: "post", url: baseURL + "xx", data: qs.stringify({ty}) }); }
用到qs來處理髮送請求的引數 npm i qs
*在使用Post時候要使用qs.stringify(),請求頭裡需設定
"Content-Type": "application/x-www-form-urlencoded"
之後就可以在pages裡的檔案寫切換程式碼了
<template> <div class="container"> <ul> <li @click="cur=1">內容1</li> <li @click="cur=2">內容2</li> <li @click="cur=3">內容3</li> </ul> <ul> <li v-for="(item,i) in news_data" :key="i">{{item.title}}</li> </ul> </div> </template> <script> import {tabdatas} from "~/api/tests.js" export default { async asyncData({params}) { let [res2]= await Promise.all([ tabdatas(), ]) return { news_data: res2.data.data, }; }, watch: { cur(val) { this.tabdatas(val).then((res) => { this.news_data = res.data.data }) }, }, data(){ return{ cur: 1, tabdatas, } } } </script> <style> </style>
完成!
請多多指教呀~\(≧▽≦)/~