Question

现在我有这两个组成部分：

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;
      });
  }
},

search.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 中使用对象对象在我的视图中动态创建输入。

当我提交包含随机数据的表单时，我收到了此请求：

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请求的参数。

请帮忙吗？

Answer 1

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

// ...

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

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

1 个答案: