如何在 Vue 中使用 slot 获取数据？

Question

我有一个这样的代码块。

<template slot="name" slot-scope="row">{{row.value.first}} {{row.value.last}}</template>

我还有一个header。

    { isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' } },
    { isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' } },
    { isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' } },

此代码显然运行但我想显示来自 API 的数据。我需要知道哪些术语？我之前在 React 中使用过 Axios。我在哪里可以定义 Axios 方法？我是否需要更改模板插槽而不是 :v-slot ?

Answer 1

你可以在methods或者mounted中使用axios

mounted(){
    this.loading = true;
    axios
    .get(`${this.backendURL}/api/v1/pages/layouts` , authHeader())
    .then(response => (this.layouts = response.data.data))
    .catch(handleAxiosError);
}

methods: {
      /**
        * Search the table data with search input
        */
      uncheckSelectAll(){
        this.selectedAll = false
      },
      onFiltered(filteredItems) {
          // Trigger pagination to update the number of buttons/pages due to filtering
          this.totalRows = filteredItems.length;
          this.currentPage = 1;
      },
      handlePageChange(value) {
          this.currentPage = value;
          axios
          .get(`${this.backendURL}/api/v1/pages?per_page=${this.perPage}&page=${this.currentPage}` , authHeader())
          .then(response => (this.pagesData = convert(response.data.data),
                             this.pagesDataLength = response.data.pagination.total));
        },
      handlePerPageChange(value) {
        this.perPage = value;
        this.currentPage = 1;
        axios
        .get(`${this.backendURL}/api/v1/pages?per_page=${this.perPage}&page=${this.currentPage}` , authHeader())
        .then(response => (this.pagesData = convert(response.data.data),
                           this.pagesDataLength = response.data.pagination.total));
      },
      deletePage(){
        this.loading = true
        this.$bvModal.hide("modal-delete-page");
        window.console.log(this.pageIdentity);
        if (!roleService.hasDeletePermission(this.pageIdentity)){
          return;
        }
        axios
        .delete(`${this.backendURL}/api/v1/pages/${this.page.id}` , authHeader())
        .then(response => (
          this.data = response.data.data.id,
          axios
          .get(`${this.backendURL}/api/v1/pages?per_page=${this.perPage}&page=${this.currentPage}` , authHeader())
          .then(response => (this.pagesData = convert(response.data.data),
                             this.pagesDataLength = 

    response.data.pagination.total)),
              alertBox(`Page deleted succesfully!`, true)
              ))
            .catch(handleAxiosError)
            .finally(() => {
                this.loading =  false
            });
          }

Answer 2

虽然您可以直接从组件代码内部进行 API 调用，但这并不意味着您应该这样做。最好将 API 调用分离到一个单独的模块中。这是一个很好的方法，它正确地遵循了关注点分离 (SoC) 原则：

在 src 下创建一个目录 services 如果它还不存在。
在 services 下，创建名为 api.service.js 的新文件。

api.service.js

import axios from 'axios';

const baseURL = 'http://localhost:8080/api'; // Change this according to your setup

export default axios.create({
    baseURL,
});

创建另一个文件peopleData.service.js

import api from './api.service';
import handleError from './errorHandler.service'; // all the error handling code will be in this file, you can replace it with console.log statement for now.

export default {
    fetchPeopleData() {
        return api.get('/people')
            .catch((err) => handleError(err));
    },

    // All other API calls related to your people's (users'/customers'/whatever is appropriate in your case) data should be added here.
    addPerson(data) {
        return api.post('/people', data)
            .catch((err) => handleError(err));
    },
}

现在您可以将此服务导入您的组件并调用该函数。

<template>
... Template code
</template>

<script>
import peopleDataService from '@/services/peopleData.service';

export default {
    data() {
        return {
            rows: [],
        };
    },
    mounted() {
        peopleDataService.fetchPeopleData().then((res) => {
            if (res && res.status == 200) {
                this.rows = res.data;
            }
        });
    },
}
</script>

您还没有告诉我们您当前的设置。如果您使用的是 Vue-Router，最好在导航守卫中获取数据，尤其是当您的组件依赖于数据时：Data Fetching

只需将代码从 mounted() 转移到导航守卫。 this 可能不可用，所以你必须使用 next 回调来设置 rows 数组，这在上面的 link 中有解释。

如何在 Vue 中使用 slot 获取数据？

How to fetch data with slot in Vue?

vue.js

vue-component

axios

vuejs2

vuetify.js