我的Vue.js代码在加载时无法正常工作

Question

            {{--  @foreach($customers as $customer)--}}
            <tr id="customerTable"  role="row" class="odd"   v-for="customer in customers">
              <td class="sorting_1">@{{ customer.company }}{{-- $customer->company --}}</td>
              <td class="">{{-- $customer->address --}}</td>
              <td>{{-- $customer->contact --}}</td>
              <td>{{-- $customer->contact_person --}}</td>
              <td>{{-- $customer->contact_person_phone --}}</td>
            </tr>
            {{--  @endforeach --}}
          </tbody>

vue.js code here

    created(){
        this.rootUrl = currentUrl;
        this.page = window.location.pathname.split('/').pop();
        loadCustomers();
    },


    methods:{
        loadCustomers : function(){
            let uri = this.rootUrl + '/load_customer/' ;
            alert(uri);
            axios.get(uri)
            .then(response => {
                //if(response.data == 'success'){
                this.customers = response.data['customers']  ;
                //alert(this.customers);
                //} 
            })
            .catch(function (error) {
                console.log(error.response);
            });
        },
        searchHandler(event){
            let uri = this.rootUrl + '/search_customer/' + this.$refs.searchText.value ;
            //alert(uri);
            axios.get(uri)
            .then(response => {
                //if(response.data == 'success'){
                    this.customers =   response.data['customers']  ;
                    alert(this.customers);
                //} 
            })
            .catch(function (error) {
                console.log(error.response);
            });
        },

I was trying to load data on created function. It's emptying data on load. vue.js code is loading data in background, I checked in devtool, but it is not showing data in frontend while using v-for on data table creation.

Answer 1

Hi you need to add var to check if data is loaded or on progress.

  loadCustomers : function(){
            let uri = this.rootUrl + '/load_customer/' ;
            alert(uri);

            loaded: false;

            axios.get(uri)
            .then(response => {
                //if(response.data == 'success'){
                this.customers = response.data['customers']  ;
                loaded: true;

                //alert(this.customers);
                //} 
            })
            .catch(function (error) {
                console.log(error.response);
            });
        },

and in your view

     @if(loaded){
     {{--  @foreach($customers as $customer)--}}
                <tr id="customerTable"  role="row" class="odd"   v-for="customer in customers">
                  <td class="sorting_1">@{{ customer.company }}{{-- $customer->company --}}</td>
                  <td class="">{{-- $customer->address --}}</td>
                  <td>{{-- $customer->contact --}}</td>
                  <td>{{-- $customer->contact_person --}}</td>
                  <td>{{-- $customer->contact_person_phone --}}</td>
                </tr>
                {{--  @endforeach --}}
}
              </tbody>