如何打印来自发布请求的响应

Question

我正在尝试为与我输入的单词匹配的日托创建一个简单的搜索栏，我正在向 api 发送一个发布请求，然后我会返回与我输入的内容匹配的所有日托，这是我的代码：

<template>
  <div class="body">
    <div>
    <h1 class="mt-3">Busca una guarderia</h1>
    <div class=" mx-1 mb-5">
    <b-form @submit.prevent="buscarGuarderia">    
    <b-form-group id="input-group-1" label-for="input-1">
          <b-form-input
            id="input-1"  
            v-model="cadena"
            required          
          >          
          </b-form-input>
        </b-form-group>
    <div class="mt-2">
    </div>
    <b-button block pill type="submit" variant="success">
        Buscar
    </b-button>
    </b-form>
  </div>
  </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "SearchDaycare",
  data() {
    return {
    currentUser: {},
    cadena: ""
    }
  },
  computed: {
    ...mapState(["daycares"]),
  },
  methods: { 
      getDaycare(){
      this.$store.dispatch("getDogDayCares", {
          user: this.currentUser.user
          });
    },
      buscarGuarderia() {      
      this.$store.dispatch("buscarGuarderia", [{
        cadena: this.cadena,
      }, "clients"])
      .then();
    }
  },
    created() {
        if (localStorage.getItem("user")) {
        try {
            this.currentUser = JSON.parse(localStorage.getItem("user"));
        } catch (e) {
            localStorage.removeItem("user");
            }
        }
    }

};
</script>
<style lang="scss" scoped>
h1 {
  color: #40db9a;
}
.body {
  margin: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cards {
  display: flex;
}
.card {
  color: #063869;
  background-color: #eef6e1;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 3px 3px 12px 2px rgba(black, 0.6);
  transition: 0.2s;
}
.card:not(:first-child) {
  margin-left: -2rem;
}
.card:not(:last-child):hover,
.card:not(:last-child):focus-within {
  transform: translateY(-1rem);
  ~ .card {
    transform: translateX(2rem);
  }
}
</style>

这是 buscarGuarderia 函数，它是将请求发送到 API 的函数

buscarGuarderia({ commit }, [credentials, userClass]) {
  return axios.post("/api/" + userClass + "/searchdaycarebyname", credentials).then();
}

它工作正常，我发送发布请求并从 API 获得响应，我想要做的是打印我得到的一个或多个响应，我在执行此操作时遇到问题，任何帮助将不胜感激 @987654321 @

Answer 1

你可以在 vuex 中创建一个状态来存储响应，一个突变来更新状态。在buscarGuarderia 操作中，您可以调用该突变来更新存储状态。

最后，在要显示响应的 vue 组件中，只需从 store 中加载即可。

Answer 2

在then里面可以填写成功响应：

buscarGuarderia({ commit }, [credentials, userClass]) {
  return axios.post("/api/" + userClass + "/searchdaycarebyname", credentials)
              .then(function(response){
                  console.log(response.data)
               });
}