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

Question

我有一个这样的代码块。

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

我还有一个标题。

    { 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

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

1. 在src 下创建一个目录services（如果它还没有的话）。
2. 在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,
});

1. 创建另一个文件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 数组，上面的链接中对此进行了说明。

Answer 2

可以在方法中使用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
            });
          }