使用对象属性作为 GET 请求的参数答案

【问题标题】：Use object properties as parameters to GET request使用对象属性作为 GET 请求的参数
【发布时间】：2018-04-10 18:52:08
【问题描述】：

现在我有这两个组件：

pesquisar.vue

form.mb-3(@submit.prevent="getPessoaFisica(object)")
  Search(:object='object')
  button.btn.btn-sm.btn-success.d-none(type="submit")
    .fa.fa-search

...

data() {
  return {
    object: {
      Cd_Pessoa: null,
      Nm_Pessoa: null,
      Nm_Apelido: null,
      Nr_Documento: null,
      Nm_Officer: null,
      Tp_Registro: null,
      Cd_TipoID: null,
    },
    page: undefined,
    list: undefined,
  };
},
methods: {
  getPessoaFisica(obj, page = 1, count = 18) {
    this.$axios
      .get("/pessoaFisica", {
        params: {
          obj,
          page,
          count
        }
      })
      .then(res => {
        this.list = res.data;
      });
  }
},

搜索.vue

<template lang="pug">
  .row(@input="$emit('input', object)")
    .col-md-4.mb-1(v-for='property in Object.keys(object)')
      .row
        .col-auto.pr-0 {{property}}:
        .col
          input.form-control.form-control-sm.py-0(v-model='object[property]')
</template>

<script>
export default {
  props: ['object']
}
</script>

我正在使用 pesquisar.vue 中的 object 对象在我的视图中动态创建输入。

当我提交带有随机数据的表单时，我收到了这个请求：

http://localhost/abc?obj=%7B%22Cd_Pessoa%22:null,%22Nm_Pessoa%22:%22her%22,%22Nm_Apelido%22:null,%22Nr_Documento%22:null,%22Nm_Officer%22:null,%22Tp_Registro%22:null,%22Cd_TipoID%22:null%7D&page=1&count=18

我真正想要的是：

http://localhost/abc?Nm_Pessoa:"her"&page=1&count=18

基本上我想要的是使用对象属性作为 GET 请求的参数。

有什么帮助吗？

【问题讨论】：

标签： javascript vue.js pug axios

【解决方案1】：

尝试使用对象扩展运算符...obj 扩展对象属性：

// ...

this.$axios
  .get("/pessoaFisica", {
    params: {
      ...obj,
      page,
      count
    }
  })
  .then(res => {
    this.list = res.data;
  });

【讨论】：