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

亲测有用，ღ( ´･ᴗ･` )比心