Just share my working code:
template:
:loading="progress_bar_loading" <!--- ----- progressing bar indicator --------- true: show ---------- false: hide --->
you need set :loading = "any_variable",
later in js, you will reset it to true/false as show/hide the progress bar.
the context is here:
<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:
before ajax or fetch you show progress bar by:
// show v-data-table progress bar
self.progress_bar_loading = true
after ajax fetch callback success, you hide progress bar by:
// hide v-data-table progress bar
self.progress_bar_loading = false
Note: you must use self. Do not use this. because of scope issue.
the context is here:
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 {}
full source code is here:
template
js
