One: axios uses the data format of the post parameter

When I was working on a project, I never paid attention to the format of the parameters passed to the background. It’s usually a JSON object. Until recently, Vue + VUe-Router + AXIos + Elemet-UI was used as a background system. In conjunction with the background, the data returned by the background has been the server off, and then let the background colleagues to see the next, that is, I pass the parameter is empty. But I clearly passed ah, and the same way in another project can call the interface normally. Later, I checked that the format of parameters received by the background of the two projects was different, so the format of parameters transmitted by the front end was required to be different.

Axios default parameter format

The default axios parameter format is Application/JSON. In this encoding, the parameter passed to the background is a serialized JSON string. But in this project, the background required application/ X-www-form-urlencoded data.

Solutions:
1:/* Introduce qs*/ in the api.js folder
 import qs from 'qs'
2:/* Use */ when using 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)
      })
    })
Copy the code
Note: this item is for meVue-cliProjects built,qsImport the resource directly, otherwise download it first and then reference it.

Two: VUE dropdown box using V-for rendering problems

In the project, there is a lot of content in the drop-down box, so use an array loop to render. I just started using the following rendering method, but it is compatible and the project does not render data in Firefox and IE.

<select v-model="repayId" >
      <option
      v-for="item in repayStatusLists"
      :key="item.id"
      :value="item.id">
    </option>
  </select>
Copy the code

And then this is the correct format.

<select v-model="repayId" >
      <option
      v-for="item in repayStatusLists"
      :key="item.id"
      :value="item.id">
      {{item.value}}
    </option>
  </select>
Copy the code

Pro test useful, ღ(´ · ᴗ · ‘) than heart