dstm2014
dstm2014
2018-12-19 05:53

从laravel控制器接收的数据未更新为vue变量

已采纳

I am creating a web app having dashboard using laravel and vue. When I pass data from controller to vue file data is received properly but when I set it to vue variable the value is not set in the variable. All data is received and its displayed in the console but when I set it to the vue variable, the variable doesn't update its value. This is my Controller class:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
    //
    public function index()
    {
        $users=User::all();

        return response()->json($users);
    }
}

This is myTeam.vue for receiving and displaying the data:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>


                    <h1>
                       This request list
                       Hello,{{this.items}}
                    </h1>

                    <ul class="list-group">
                        <li class="list-group-item" v-for="t in items">{{items}}</li>

                    </ul>

                      </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        data(){
            return {
                 //items: []
                 items:[],

            }
        },

        created() {
            var self=this;
             axios.get('/allusers').then((response) => self.items=response.data) .catch((error)=>console.log(error));

             axios.get('/allusers') .then(response => console.log(response.data));

            console.log('Component mounted.'+this.items)
        },


    }
</script>

Now when I run it the console prints the array properly means data is received but when I set it to items variable the data is not set.

My Output is this: This is the output image file

Please check it and thanks in advance ...

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duanlie2709 duanlie2709 3年前

    This is never print items array because it's execute before the ajax response is filled.

        console.log('Component mounted.'+this.items)
    

    That's why your console is always blank. You can search about blocking and non blocking programming.

    your code have small bug. Update your code and try this:

    <h1>
     This request list
        Hello,{{items}}
    </h1>
    
    <ul class="list-group">
        <li class="list-group-item" v-for="t in items">{{t}}</li>
    </ul>
    ...
    
    <script>
        export default {
            data(){
                return {
                    items:[],
                }
            },
            mounted: function () {
                this.getList();
            }
    
            methods: {
                let _this = this;
                axios.get('/allusers')
                .then((response) => _this.items = response.data) 
                .catch((error)=>console.log(error));
            },
        }
    </script>
    

    This can help you. Good luck.

    点赞 评论 复制链接分享