Javascript 如何使用Vue从数据库检索数据

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

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

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

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

这些是我的文件：

webpage.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

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

路由/web.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

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

上面的代码似乎总是显示“旧数据”，而我希望它显示“新数据”。我在vue文档的某个地方读到，vue 2.x中对“ready”进行了删节，我应该使用“mounted”来代替。但是，在加载页面时似乎没有运行此函数

---

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

在发出HTTP请求后，需要将

test

的值设置为响应。例如：

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; 
        });

    }
});

---

谢谢你的回答。我试过你的方法，但结果还是一样。我怀疑挂载的函数可能会在使用vue显示data.test后运行，因为网页显示“旧数据”，但我的console.log正在记录“新数据”

这一点。基于编辑的答案，测试将不起作用，因为它将与关闭的范围相关联。这就是我使用self的原因。我会将其编辑到我的问题中，但即使使用“self”，测试值似乎也会在http请求完成之前显示。在请求完成后，您会看到新数据吗？另外，我想问一下，您在哪里添加了
#app
容器？在您的主布局中？@Mozammil我的理解是
=>
应该已经解决了范围问题。您确定
/test
路由工作正常吗？您的
this.$http.get
没有错误处理程序，因此请检查浏览器的“网络”选项卡，看看它是否因某种原因失败。好主意，但是console.log显示“新数据”，因此我的/测试路由正在工作。test='foo'

就在

mounted（）

函数中工作吗？非常有趣，@ceejayoz的建议似乎在网页上显示了“foo”。http请求可能是异步的。并且在http调用完成之前显示该值。关于如何实施这一点有什么建议吗？@Bobray你能试试吗？注意，该模板已移动到Vue组件本身。