javascript - 如何使用Vue从数据库中检索数据

问题描述

解决了不知何故，正如用户评论的那样，将模板从网页移动到 vue 脚本中解决了这个问题。我不完全确定为什么。这是一个工作小提琴，也适用于我的设置。

原始问题 我有一些 Laravel 经验，但对使用 Vue 还是很陌生。我想要一个显示数据库中某些值的页面，当添加或删除一个值时，我希望页面自动更新而无需重新加载。我相信这正是您使用 Vue 的目的。

我正在运行 Laravel 5.7.16 并使用 npm install 安装了 vue 2.5.21 和 vue-resource 1.5.1。该数据库在 MariaDB 10.1.35 上运行。

到目前为止，我正在尝试从 vue 发出一个 http GET 请求，GET url 设置了一个 web 路由，对于这个路由，我将创建一个从数据库中检索数据的函数。但是，我似乎无法让 http 请求正常工作。

这些是我的文件：

网页.blade.php

@extends('layouts.app')

@section('content')
    <div id="app" class="container">
        <p>@{{ test }}</p>
    </div>

    <script src="{{ asset('js/vue.min.js') }}"></script>
    <script src="{{ asset('js/vue-resource.min.js') }}"></script>
    <script src="{{ asset('js/script.js') }}"></script>
@endsection

我在网上找到的一些资源使用脚本标签在 vue 中加载，其他使用 .js 文件中的“require”。对我来说，这正在起作用，但我不确定这是否是最好的方法。

脚本.js

var vue = new Vue({
el: '#app',

data: {
    test: 'old data',
},

mounted: function() {

    var url = "/test";

    this.$http.get(url).then(response => {

        // get body data
        this.test= response.body;
        return this.test;

    });

}
});

路线/web.php

Route::get('/test', function()
{
    return 'new data';
});

上面的代码似乎总是在我希望它显示“新数据”的地方显示“旧数据”。我在 vue 文档的某处读到 Vue 2.x 中已弃用“就绪”，而我应该改用“已安装”。但是，加载页面时似乎没有运行此功能。

有人可以给出一个 Vue 发出 http GET 请求以检索某些值并将该值显示在网页上的清晰示例吗？一旦我可以让它工作，我会担心它会自动更新。

标签： javascriptlaravelvue.js

var vue = new Vue({ el: '#app', data: { test: 'old data', }, mounted: function() { var url = "/test"; this.$http.get(url).then(response => { this.test = response.body; }); } });

javascript - 如何使用Vue从数据库中检索数据

问题描述

解决方案

推荐阅读