Uncaught (in promise) TypeError: Cannot read property 'push' of undefined axios答案

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'push' of undefined axiosUncaught (in promise) TypeError: Cannot read property 'push' of undefined axios
【发布时间】：2020-08-01 21:44:41
【问题描述】：

我正在尝试在书架对象中收集书籍。但是，当我尝试添加一本书时，该页面什么也不做，并且我在控制台中收到此错误“未捕获（承诺中）TypeError：无法读取未定义的属性'push'”。在这方面需要帮助。

main.js

function sendRequest(url,method,data) {
    var r = axios({
        method: method,
        url: url,
        data: data,
        xsrfCookieName: 'csrftoken',
        xsrfHeaderName: 'X-CSRFToken',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    return r
}

var app = new Vue({
    el : '#app',
    data:   {
        book: '',
        books:  [
            {title: 'one'},
            {title: 'two'}
        ]
    },
    
    created(){
        var vm = this;
        var r = sendRequest('','get')
            .then(function(response){
                vm.books = response.data.books; 

            })


    },
    methods: {
        createBook(){
            var vm = this;
            var formData = new FormData();
            formData.append('title', this.book);

            sendRequest('','post',formData)
                .then(function (response) {
                    vm.books.push(response.data.book); //PROBLEM HERE
                    vm.book = '';

                })
        }
    }

})

views.py

def add_book(request, shelf_id):
    context = {}
     if request.POST:
        shelf = get_object_or_404(Shelf, pk=shelf_id)
        book_form = BookCreation(request.POST)
        temp = book_form.save(commit=False)
        temp.shelf = shelf
        temp.save()
        if book_form.is_valid():
            books = book_form.save()
            return JsonResponse({'book': model_to_dict(books)},status=200)
    return render(request, 'shelf/addBook.html')

url.py

path('<int:shelf_id>/create_book', add_book, name='addbook'),

【问题讨论】：

你能分享从请求返回的json到那个python后端吗？
问题可能在这里：vm.books = response.data.books;。其中 data.books 不是数组，而是未定义
我在 sendRequest 方法中运行了 console.log(response.data.song) 并得到了 {id: 9, title: "blah", Shelf: 71, removed: false}。但是错误一直指向这一行 vm.books.push(response.data.book)

标签： django vue.js axios

【解决方案1】：

显然问题在于我在后端使用 if request.POST 而不是 request.method =='POST'。

def add_book(request, shelf_id):
    context = {}
     if request.method == 'POST': //THIS IS WORKING CODE
        shelf = get_object_or_404(Shelf, pk=shelf_id)
        book_form = BookCreation(request.POST)
        temp = book_form.save(commit=False)
        temp.shelf = shelf
        temp.save()
        if book_form.is_valid():
            books = book_form.save()
            return JsonResponse({'book': model_to_dict(books)},status=200)
    return render(request, 'shelf/addBook.html')

【讨论】：