从多个 api - axios 中获取数据并在加载页面中获取数据 vue.js 3

Question

我想从 Vue.js 中 axios 的多个 API 中获取数据 3. 后端是 Laravel API.

我可以在控制台上获取 response1.data 和 response2.data 上的数据，但是如何将这些数据分配给在 Vue.js 的 data() 函数中定义的对象。

我需要此数据在加载页面上加载。 Vue.js 代码是 -

<script>
export default {
  name:'Followup',
  data() {
    return {
      patient:{},
      labGroup:{},
    }
  },
  created() {     
    this.$axios.get('/sanctum/csrf-cookie').then(response => {
      this.$axios.all([
        this.$axios.get(`/api/patients/showSomeDetails/${this.$route.params.id}`),
         this.$axios.get('/api/labitems/getGroup')
      ])
      .then(this.$axios.spread(function (response1, response2) {
          console.log(response1.data) // this has given result on console. 
          this.patient = response1.data  // It is giving error on console. => TypeError: Cannot set property 'patient' of null
          this.labGroup = response2.data // same
          console.log(response2.data)

        }))
        .catch(function (error) {
           console.error(error);
        });

        })
    },
computed() {
},
methods: {
}
} 
</script>

我在控制台上遇到错误 - 这个 - app.js:20666 TypeError: Cannot set property 'patient' of null

如何将数据分配给 patient 和 labGroup，以便它通过 v-model 应用于我的网页

这是我的患者随访表，我需要从患者 table 那里获取患者的详细信息，并从 labitems table.

获取实验室报告以填写实验室报告

我希望有人能给我一个解决方案。

Answer 1

第一个选项：

您可以使用 watch 属性 of vue.js 并且在渲染之前 patient 属性您需要添加 v-if 如下在具有某些真实值之前，不会在 DOM 上呈现。

模板：

<div v-if="patient">{{patient}} </div>

脚本:

watch: {
    // whenever patient changes, this function will run
    patient: function (newValue, oldValue) {
      this.patient= newValue;
    }
  }

第二个选项： 通过 awaiting 将您的 get 调用包装在 getPatient 方法中，一旦数据绑定到它就会呈现 patient。

模板：

<div v-if="patient">{{patient}} </div>

<script>
export default {
    name: 'Followup',
    data() {
        return {
            patient: null,
            labGroup: null,
        };
    },
    created() {
        await this.getPatient();
    },
    computed() {},
    methods: {
        async getPatient() {
            await this.$axios.get('/sanctum/csrf-cookie').then((response) => {
                this.$axios
                    .all([this.$axios.get(`/api/patients/showSomeDetails/${this.$route.params.id}`), this.$axios.get('/api/labitems/getGroup')])
                    .then(
                        this.$axios.spread(function (response1, response2) {
                            console.log(response1.data); // this has given result on console.
                            this.patient = response1.data; // It is giving error on console. => TypeError: Cannot set property 'patient' of null
                            this.labGroup = response2.data; // same
                            console.log(response2.data);
                        })
                    )
                    .catch(function (error) {
                        console.error(error);
                    });
            });
        },
    },
};
</script>

Answer 2

在function (response1, response2) {中访问this不会是vue实例。

要么使用箭头函数，要么将 this 绑定到 function (response1, response2) { ... }.bind(this)

从多个 api - axios 中获取数据并在加载页面中获取数据 vue.js 3

fetch the data from multiple api - axios and get it in the page on load vue.js 3

javascript

api

vue.js

axios

web-frontend