Question

我正在尝试使用Vuejs和Laravel完成CRUD应用程序。现在我可以添加一篇文章，但无法删除，我在控制台中看到了这个错误：

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

模板中的html如下所示：

<div class="card card-body"v-for="article in articles" :key="article.id">

    <h3>{{ article.title }}</h3>
    <p>{{ article.body }}</p>
    <button @click="deleteArticle(article.id)" class="btn btn-danger">Delete</button>

</div>

然后在脚本中我有这个：

如何进行删除工作？

<script>
    export default {
        data(){
            return{
                articles: [],
                article: {
                    id: '',
                    title: '',
                    body: ''
                }, 
                article_id: '',
                pagination: {},
                edit: false
            }
        },
        created(){
            this.fetchAllArticles();
        },
        methods: {
            fetchAllArticles(){ 
                fetch('/api/articles').then(res => res.json()).then(res => {
                    this.articles = res.data;
                })
                .catch(err => console.log(err));
            },
            deleteArticle(id){

                if(confirm('Are you sure?')){
                    fetch('api/article/${id}', {
                        method: 'delete'
                    })
                    .then(res => res.json())
                    .then(data => {
                        alert('Article removed');
                        this.fetchAllArticles();
                    })
                    .catch(err => console.log(err));
                }
            }
        }
    }
</script>

如果我输入了删除方法的网址，我可以查看数据，如图所示：

我的删除控制器如下所示：

public function destroy($id)
{
    // Get article
    $article = Article::findOrFail($id);

    if($article->delete()) {
        return new ArticleResource($article);
    }    
}

从浏览器中的网络我看到：

提前致谢

Answer 1

从我在您的控制台中看到的API地址不正确，应为'api/article/' + id

Answer 2

我从来没有使用fetch，我喜欢使用axios，但通过谷歌搜索我发现你不得不使用那些符号＆＃39;＆＃39;但那些“所以：

fetch(`api/article/${id}`, {
    method: 'delete'
})

Laravel删除方法不适用于vuejs

2 个答案: