Мой код 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 здесь

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

Я пытался загрузить данные о созданной функции. Это опустошает данные при загрузке. Код vue.js загружает данные в фоновом режиме, я проверял в devtool, но он не показывает данные во внешнем интерфейсе при использовании v-for при создании таблицы данных.

Answer 1

Привет, вам нужно добавить var, чтобы проверить, загружены ли данные или идет процесс.

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

и по вашему мнению

     @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>