美文网首页
vue项目中遇到的问题总结

vue项目中遇到的问题总结

作者: 随笔记呀 | 来源:发表于2018-09-27 17:25 被阅读0次

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

    亲测有用,ღ( ´・ᴗ・` )比心

    相关文章

      网友评论

          本文标题:vue项目中遇到的问题总结

          本文链接:https://www.haomeiwen.com/subject/jmeeoftx.html