只需分享我的工作代码：
模板：
: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