Vue.js 与 laravel 5.3

Posted 2023-02-22

【中文标题】Vue.js 与 laravel 5.3

【英文标题】：Vue.js with laravel 5.3

【发布时间】：2017-02-10 11:21:06

【问题描述】：

我正在使用 Laravel 5.3 和 Vue.js（对此非常陌生）。 这是我当前的代码

app.js

var vm = new Vue(
    el: '#app',

    data:  
            messages: []
    ,

    ready: function()

        this.getMessages();
    ,


    methods: 

        getMessages: function()
                this.$http.get('api/messages').then((response) => 
                    this.$set('messages', data);
                        , (response) => 
                );
        
    
);

api.php 路由很简单

Route::get('/messages', function() 
     return Message::latest()->get();
    );

注意：在这里，当我尝试直接以 localhost:8000/api/messages 访问路由时，我会得到包含完整数据的数组

在我看来，我有

<div class="content"   id="app">
                <tr v-for="message in messages">
                    <td> @ message </td>
                </tr>
</div>

我已经包含了所有 jquery、vue.js 和 vue.resource 的在线库。 当我使用 vue.js 调试器时，它显示它返回 messages[] 但它是空的。 我已经遵循了很多示例，但无法使其正常工作。 非常感谢任何帮助

【参考方案1】：

试试这个：

var vm = new Vue(
    el: '#app',

    data:  
            messages: []
    ,

    ready: function()

        this.getMessages();
    ,


    methods: 

        getMessages: function()
                let ctrl = this;
                this.$http.get('api/messages').then((response) => 
                    this.messages = response.data;
                );
        
    
);

【参考方案2】：

如果您使用的是 vue.js 2.0，ready 现在已弃用，您可以使用 mount 代替

mounted: function () 
  this.$nextTick(function () 
    this.getMessages();
  )

Vue.js Docs

【参考方案3】：

由于您使用的是箭头语法，所以我切换到完整的 ES2015 代码

getMessages() 

    this.$http.get('api/messages')
      .then( result => 
       this.messages = result.json() 
      )

【讨论】：

贝尔明。非常感谢您的回复。我试过了，它仍然是空的。但我找到了一个可能不是最好的解决方案。我使用的是 vue.js 版本 2.0.1，一旦我将其更改为旧版本 1.0.2 就可以了。

很遗憾我还没有使用 VueJS 2.0，所以 API 中的某些内容可能发生了变化。