如何使用Vue

时间:2019-01-03 17:56:05

标签: javascript laravel vue.js

已解决 正如用户所言,以某种方式将模板从网页移至vue脚本即可解决该问题。我不确定为什么。 Here是一个工作提琴,也可以在我的设置中使用。

原始问题 我有一些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请求。

这些是我的文件:

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

我在网上发现的一些资源使用script标签在vue中加载,其他则在.js文件中使用'require'。对我来说,这正在起作用,但是我不确定这是否是最好的方法。

script.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;

    });

}
});

routes / web.php

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

上面的代码似乎总是显示“旧数据”,而我希望它显示“新数据”。我在vue文档中的某个地方读到,在Vue 2.x中描述了“就绪”,而我却改用了“挂载”。但是,加载页面时似乎没有运行此功能。

有人可以给出Vue发出http GET请求以获取某些值并将其显示在网页上的清晰示例吗?我会担心它一旦能够正常工作便会自动更新。

1 个答案:

答案 0 :(得分:0)

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

    }
});