分类 默认分类 下的文章

博主最近在用 Vue 写一个无限级类型的组件,遇到了以下问题:

Vue.js 报错: Invalid prop: type check failed for prop "index". Expected String with value "7", got Number with value 7

翻译可知:index 属性类型错误,应该传入字符串7,而不是Number类型的 7

因此,解决方案:

  • 利用 JS 中的 String() 函数,将任意类型强制转换为字符串
<template>
<el-submenu v-if="data.son.length > 0" :index="String(data.id)">
    <span slot="title">{{data.cate_name}}</span>
    <template v-for="obj in data.son">
    <subMenu :data="obj"></subMenu>
    </template>
</el-submenu>
    <el-menu-item :index="String(data.id)" v-else>{{data.cate_name}}</el-menu-item>
</template>

笔者这两天在写一个前后端分离的项目(Vue.js 作为前端、ThinkPHP 做后端),遇到了使用 Axios 向后端无法传递参数的情况,以下为解决方案,记录以供下次查阅。

原先的代码如下:

import request from '@/plugin/axios'
import qs from 'qs'

export function userSearch (query) {
  return request({
    url: '/user/search',
    method: 'POST',
    params: query
  })
}

因为我们在对接口 POST 提交参数的时候,使用数组类型之前需要进行序列化操作,这个时候我们就可以使用 qs 库的 stringify 方法,进行序列化操作,并且需要提供 options,即为 arrayFormat: 'repeat'

修改后的代码如下:

import request from '@/plugin/axios'
import qs from 'qs'

export function userSearch (query) {
  return request({
    url: '/user/search',
    method: 'POST',
    params: query,
    paramsSerializer: function (params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    }
  })
}

图片参考:

QQ截图20190815165514.png