vue專案中遇到的問題總結

花語_發表於2018-10-17
Vue

一：axios用post傳參的資料格式

   之前在做專案的時候，從來都沒有注意過引數傳給後臺的格式。一般都是覺的是json物件。 直到前段時間，用Vue +Vue-router + axios + element-ui做了個後臺系統。在和後臺聯調的時候，後臺返回的資料一直是伺服器開小差，後來讓後臺同事給看了下，說是我傳參為空。可是我明明傳了呀，而且同樣的傳參方式在另一個專案中都能正常調取介面。後來查了一下，原來這兩個專案，後臺接收的引數的格式不一樣，所以也就要求前端傳的引數格式不一樣。

axios預設傳參格式

   axios預設的傳參格式是application/json,這種編碼方式，傳遞給後臺的引數是序列化的json字串。但是在這個專案當中，後臺要的是application/x-www-form-urlencoded 這種格式的資料。

解決方法：
1:/*在api.js 資料夾中引入qs*/
 import qs from 'qs'
2：/*在使用axios中使用*/
 post : async function(url, options) {
    var resultData = await  new Promise((resolve, reject) => {
      axios.post(API_ROOT + url, qs.stringify(options)).then((response) => {
        resolve(response.data)
      }).catch((error) => {
        reject(error)
      })
    })
複製程式碼
注意： 此專案是我用Vue-cli搭建的專案，qs資源直接引入就行，否則的話得先下載再引用。

二：vue中下拉框使用v-for的渲染問題

   在專案中，下拉框的內容比較多，所以使用陣列迴圈的方式來渲染。    我剛開始使用的一下的渲染方式，但是有相容性，專案在火狐和IE瀏覽器中資料渲染不出來。

<select v-model="repayId" >
      <option
      v-for="item in repayStatusLists"
      :key="item.id"
      :value="item.id">
    </option>
  </select>
複製程式碼

    後來改成這樣的格式就正確了。

<select v-model="repayId" >
      <option
      v-for="item in repayStatusLists"
      :key="item.id"
      :value="item.id">
      {{item.value}}
    </option>
  </select>
複製程式碼

親測有用，ღ( ´･ᴗ･` )比心

相關文章