vuetify.js之填充数组后如何隐藏进度条

隐藏进度线性组件的最佳方法是什么？我是否应该在等待几秒钟后实现它:

axios.get(this.endpoint) 
        .then(response => this.data = response.data) 
        .catch(error => console.log(error.response.data)); 

我想在填充数组后隐藏进度条。

        <v-progress-linear style="margin : 0 auto ;" :indeterminate="isLoading" v-show="isLoading = false"></v-progress-linear> 

我在这里的目的是展示一些 x 秒，这样我就可以展示它一些很酷的效果

请您参考如下方法:

只需分享我的工作代码:

模板:

:loading="progress_bar_loading"    <!--- ----- progressing bar indicator --------- true: show ---------- false: hide  ---> 

你需要设置 :loading = "any_variable",

稍后在 js 中，您会将其重置为 true/false 作为显示/隐藏进度条。

上下文在这里:

  <v-data-table 
            :headers="headers" 
            :items="user" 
 
            :loading="progress_bar_loading"    <!--- ----- progressing bar indicator --------- true: show ---------- false: hide  ---> 
 
 
            :search="search" 
           <!---  hide-actions  --->      <!--- ----- hide/show  pagination -------------  ---> 
            class="elevation-1" 
 
 
          > 
 
 
 
                <v-progress-linear slot="progress"  indeterminate></v-progress-linear> 
 
                                <template slot="items" slot-scope="props" > 
                                  <td>{{ props.item.full_name }}</td> 
                                  <td class="text-xs-left">{{ props.item.name }}</td> 
                                  <td class="text-xs-left">{{ props.item.password }}</td> 
                                  <td class="text-xs-left">{{ props.item.agency }}</td> 
                                  <td class="text-xs-left">{{ props.item.level }}</td> 

js:

在 ajax 或 fetch 之前显示进度条:

      // show v-data-table progress bar 
             self.progress_bar_loading = true 

ajax fetch 回调成功后，隐藏进度条:

       // hide v-data-table progress bar 
                                self.progress_bar_loading = false 

注意:你必须使用 self.不要使用这个。因为范围问题。

上下文在这里:

new Vue({ 
   el: '#app', 
       data: () => ({ 
 
 
 
  created () { 
 
 // Use creation hooks if you need to set things up in your component both during client rendering and server rendering.  
 // You will not have access to the DOM or the target mounting element (this.$el) inside of creation hooks  
 
this.initialize() 
   }, 
 
 
  mounted () { 
 
//Use mounted if You need to access or modify the DOM of your component immediately before or after the initial render. 
// Do not use mounted if You need to fetch some data for your component on initialization. Use created (or created + activated for keep-alive components) for this instead, especially if you need that data during server-side rendering. 
 
//this.initialize() 
   }, 
 
 
 
 
   methods: { 
 
 
initialize () { 
 
 
 
                 var getUser_url = url + 'cfc/sw.cfc?method=getUser&returnformat=json&queryformat=struct'; 
 
                console.log(getUser_url ) 
 
            /* 
                You can use a plethora of options for doing Ajax calls such as Axios, vue-resource or better yet the browser's built in fetch API in modern browsers.  
                You can also use jQuery via $.ajax() API, which simply wraps the XHR object in a simple to use method call  
                but it's not recommended to include the whole jQuery library for the sake of using one method. 
                https://www.techiediaries.com/vuejs-ajax-http/ 
 
                http://updates.html5rocks.com/2015/03/introduction-to-fetch 
                The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.  
                It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network. 
 
            */ 
 
 
                //   **********  must use self = this **************  
                // this reference vue-app.  must pass it to self, then pass into callback function (success call back) 
                var self = this;   
 
 
 
 
                // show v-data-table progress bar 
                 self.progress_bar_loading = true 
 
 
 
 
                fetch(getUser_url) 
                        .then(function (response)  
                               { 
 
                                     // if js error here, likely it is coldfusion server output error message instead of valid json  
                                     // so check coldfusion server response. 
                                       return response.json(); 
 
                                }) 
 
                        .then(function (result) { 
 
 
 
 
                                 //------------------------ properties to lowercase ---------------------- 
 
                                 /*  
                                     result = [{"FULL_NAME":"xXx"}, {}, {}....... {}] 
                                     result is upper case, must convert all properties to lowercase,  
                                     result = [{"full_name":"xXx"}, {}, {}....... {}] 
                                     however, the value like password or number MUST remain no change.  
                                 */ 
 
                                 // result = [{}, {}, {}....... {}] 
                                    var result_lower_properties= []; 
 
                                    var arrayLength = result.length; 
 
                                    for (var i = 0; i < arrayLength; i++) { 
 
                                        var obj = result[i]; 
                                        var obj_lower_properties = {}; 
 
                                        for (var prop in obj) { 
 
                                                          //console.log(prop.toLowerCase()) 
                                                          //console.log(obj[prop]) 
 
                                                          obj_lower_properties[prop.toLowerCase()] = obj[prop] 
                                        }// for 
 
                                        result_lower_properties.push(obj_lower_properties) 
 
                                    }// for 
 
                                  //----------  ENd -------------- properties to lowercase ---------------------- 
 
 
 
 
 
                                 // must use self.user,  do not use this.user,  
                                 // because here, this's scope is just the function (result).    
                                 // we need this reference to vue-app,  
                                 self.user = result_lower_properties  // [{}, {}, {}]   
 
 
                                 // hide v-data-table progress bar 
                                self.progress_bar_loading = false 
 
    }); // fetch(){} 
 
 
   console.log(JSON.stringify(this.user)); 
 
 
 
 
 
},  // initialize {} 

完整的源代码在这里:

template

js