douduiti3040 2019-06-10 13:11
浏览 168

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

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

  • 写回答

1条回答

  • dtamho6404 2019-06-10 18:27
    关注

    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>
    
    评论

报告相同问题?

悬赏问题

  • ¥100 高价邀请复制 域天d8联网狗
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?