编辑：提供的答案虽然很有价值，但并不能真正涵盖我不知道我在哪里搞砸代码的事实。
EDIT2：请求的App.js代码段 -
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('articles', require('./components/Articles.vue'));
Vue.component('navbar', require('./components/Navbar.vue'));
const app = new Vue({
el: '#app'
});
有点新的laravel php和vue.js.我正在关注视频教程，同时为其添加一些自定义功能。我遇到了POST 500内部服务器错误的问题，我似乎无法弄清楚。我的代码如下。
这是错误：
app.js:47788 POST http://codechallenge.cravero/api/article 500 (Internal Server Error)
addArticle @ app.js:47788
submit @ app.js:47209
invoker @ app.js:37834
fn._withTask.fn._withTask @ app.js:37633
app.js:47809 SyntaxError: Unexpected token < in JSON at position 0
到目前为止我的代码（我已经对它进行了一致的测试，一旦我添加了addArticle就会出错）
我不介意提供有问题的视频，但我不想把我的问题作为间接宣传来解决这个问题。
<template>
<div>
<h2>Users</h2>
<form @submit.prevent="addArticle" class="mb-2">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name"
v-model="article.name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email"
v-model="article.email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="City"
v-model="article.city">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="State"
v-model="article.state">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company"
v-model="article.company">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Birthdate ex: 01/01/1991"
v-model="article.birthdate">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Office phone"
v-model="article.workphone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Personal phone"
v-model="article.housephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address ex: Home Street 145"
v-model="article.address">
</div>
<button type="submit" class="btn btn-light btn-block">Save user</button>
</form>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a class="page-link" href="#"
@click ="fetchArticles(pagination.prev_page_url)">Previous</a></li>
<li class="page-item disabled"><a class="page-link text-dark" href="#">Page {{ pagination.current_page }} of {{ pagination.last_page }}</a></li>
<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"><a class="page-link" href="#"
@click ="fetchArticles(pagination.next_page_url)">Next</a></li>
</ul>
</nav>
<div class="card card-body mb-2 col-md-6" v-for="article in articles" v-bind:key="article.id">
<h4>{{ article.name }}</h4>
<p>Email:{{ article.email}} </p>
<p>Phone number: {{ article.workphone}} </p>
<p>City: {{ article.city}} </p>
<p>State: {{ article.state}} </p>
<p>Company: {{ article.company}} </p>
<hr>
<button @click="deleteArticle(article.id)" class="btn btn-danger">Delete user</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
articles: [],
article: {
id: '',
name: '',
email: '',
city: '',
state: '',
company: '',
birthdate: '',
workphone: '',
housephone: '',
address: ''
},
article_id:'',
pagination: {},
edit: false
}
},
created() {
this.fetchArticles();
},
methods: {
fetchArticles(page_url) {
let vm = this;
page_url = page_url || 'api/articles'
fetch(page_url)
.then(res => res.json())
.then(res => {
this.articles = res.data;
vm.makePagination(res.meta, res.links);
})
.catch(err => console.log(err));
},
makePagination(meta, links) {
let pagination = {
current_page: meta.current_page,
last_page: meta.last_page,
next_page_url: links.next,
prev_page_url: links.prev
}
this.pagination = pagination;
},
deleteArticle(id) {
if(confirm ('Are you sure you want to delete the user?')) {
fetch(`api/article/${id}`, {
method: 'delete'
})
.then(res => res.json())
.then(data => {
alert('User removed');
this.fetchArticles();
})
.catch(err => console.log(err));
}
},
addArticle() {
if(this.edit === false) {
//add
fetch('api/article', {
method: 'post',
body: JSON.stringify(this.article),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
this.article.name = '';
this.article.email = '';
this.article.city = '';
this.article.state = '';
this.article.company = '';
this.article.birthdate = '';
this.article.workphone = '';
this.article.housephone = '';
this.article.address = '';
alert('User added');
this.fetchArticles();
})
.catch(err => console.log(err));
} else {
//update
}
}
}
}
</script>