vue select遍历 get请求向后台传数据

Question

和后台调接口的过程中，遇到select选择器选中后，将value=0传给后台，但是传不过去的问题

      <Select v-model="maintainState" placeholder="请选择" size="large" filterable clearable>
        <Option v-for="item in maintainStates" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      
       maintainStates: [
        {
          value: 0,
          label: '未开始'
        },
        {
          value: 1,
          label: '进行中'
        },
        {
          value: 2,
          label: '已完成'
        }
      ]
      

选择value = 0 F12调试下

没有status字段 没有传过去

封装的get请求

     get (url, params) {
        let queryString = []
        if (params) {
          Object.keys(params).forEach((key) => params[key] && queryString.push(`${key}=${params[key]}`))
        }
        if (queryString.length > 0) {
          queryString = queryString.join('&')
          url += `?${queryString}`
        }
        return axios
          .get(url)
          .then(handleStatus)
          .catch(handleError)
      }
      

封装得post请求

          post (url, params) {
            return axios
              .post(path + url, getString(params))
              .then(handleStatus)
              .catch(handleError)
          }
      

但是如果给value加上引号改成

       maintainStates: [
        {
          value: '0',
          label: '未开始'
        },
        {
          value: '1',
          label: '进行中'
        },
        {
          value: '2',
          label: '已完成'
        }
      ]

就可以传过去

或者把请求方式改为post也可以

最奇怪的是只有value=0时传不过去 value=1,2时都可以

请问大神这是为什么呢？ 是我封装的get请求不对吗？

Answer 1

Object.keys(params).forEach((key) => params[key] && queryString.push(`${key}=${params[key]}`))

里面的代码

params[key] && queryString.push(`${key}=${params[key]}`)

你这里需要params[key]为true才会执行&&后的语句，而当status为0时，上述变成

0 && queryString.push(`${key}=${params[key]}`)

0是falsy(虚值)，是在Boolean 上下文中已认定可转换为'假'的值，所以后面push操作不会执行。而1, 2是truthy,而非空字符串也是truthy,所以会执行push操作。

Answer 2

js本身是弱类型的语言，0有很多种解释，可以代表数字，也可以代表false（无），在你这个场景里面很明显，js认为status无值造成的