我的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>