时间戳

首页 > 解决方案 > 未捕获的类型错误：无法设置未定义的属性“axios”

vue.js - 未捕获的类型错误：无法设置未定义的属性“axios”

问题描述

我只是尝试在 axios 和 Laravel 中最新的 Vue 的帮助下编写一个 SPA。我通过 npm 安装了所有需要的东西，但是我得到了标题中提到的错误。

app.js:19782 Uncaught TypeError: Cannot set property 'axios' of undefined

我查看了我的组件 app.js 和 bootstrap.js，但对我来说一切都很正常。我什至在网上搜索了解决方案，遗憾的是他们没有提供帮助。

我的开发服务器在后台运行，所以应该有一个工作连接（工匠服务）。

应用程序.js

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

引导程序.js

window._ = require('lodash');



window.axios = require('axios');


window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

AllBooks.vue

<template>
    <div>
        <h3 class="text-center">All Books</h3>
        <br />

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Author</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="book in books" :key="book.id">
                    <td>{{ book.id }}</td>
                    <td>{{ book.name }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.created_at }}</td>
                    <td>{{ book.updated_at }}</td>
                    <td>
                        <div class="btn-group" role="group">
                            <router-link
                                :to="{ name: 'edit', params: { id: book.id } }"
                                class="btn btn-primary"
                                >Edit
                            </router-link>
                            <button
                                class="btn btn-danger"
                                @click="deleteBook(book.id)"
                            >
                                Delete
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            books: []
        };
    },
    created() {
        this.axios.get("http://localhost:8000/api/books").then(response => {
            this.books = response.data;
        });
    },
    methods: {
        deleteBook(id) {
            this.axios
                .delete(`http://localhost:8000/api/book/delete/${id}`)
                .then(response => {
                    let i = this.books.map(item => item.id).indexOf(id); // find index of your object
                    this.books.splice(i, 1);
                });
        }
    }
};
</script>

标签： vue.jsaxios

解决方案

尝试将 axios 添加到 Vue 实例。

阅读本文了解更多详情https://vuejs.org/v2/cookbook/adding-instance-properties.html

在你的 app.js

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

Vue.prototype.$axios = axios; // notice this

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

然后在你的 AllBooks.vue

<script>
export default {
    data() {
        return {
            books: []
        };
    },
    created() {
        this.$axios...;
    },
    methods: {
        deleteBook(id) {
            this.$axios...;
        }
    }
};
</script>

推荐阅读