Vuetify.js 填充数组后如何隐藏进度线性条
隐藏进度线性组件的最佳方法是什么？我是否应该在执行以下操作后等待几秒钟后将其实现为：Vuetify.js 填充数组后如何隐藏进度线性条,vuetify.js,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 a
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>
秒，这样我就可以给它展示一些很酷的效果只需分享我的工作代码： 模板：
:loading="progress_bar_loading" <!--- ----- progressing bar indicator --------- true: show ---------- false: hide --->
// show v-data-table progress bar
self.progress_bar_loading = true
// hide v-data-table progress bar
self.progress_bar_loading = 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>
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 {}
newvue({
el:“#应用程序”，
数据：（）=>({
创建（）{
//如果需要在客户端渲染和服务器渲染期间在组件中设置内容，请使用创建挂钩。
//您将无法访问创建挂钩内的DOM或目标装载元素（this.$el）
this.initialize（）
},
挂载（）{
//如果需要在初始渲染之前或之后立即访问或修改组件的DOM，请使用mounted。
//如果需要在初始化时获取组件的某些数据，请不要使用“已装载”。为此，请使用“已创建”（或“为保持活动状态组件创建+激活”），尤其是在服务器端渲染期间需要该数据时。
//this.initialize（）
},
方法：{
初始化（）{
var getUser_url=url+'cfc/sw.cfc？method=getUser&returnformat=json&queryformat=struct'；
console.log（getUser\u url）
/*
您可以使用大量选项来执行Ajax调用，例如Axios、vue resource，或者在现代浏览器中更好地使用浏览器内置的fetch API。
您还可以通过$.ajax（）API使用jQuery，它只需将XHR对象包装在一个易于使用的方法调用中
但不建议为了使用一种方法而包含整个jQuery库。
https://www.techiediaries.com/vuejs-ajax-http/
http://updates.html5rocks.com/2015/03/introduction-to-fetch
fetchapi提供了一个JavaScript接口，用于访问和操作HTTP管道的某些部分，例如请求和响应。
它还提供了一个globalfetch（）方法，该方法提供了一种通过网络异步获取资源的简单逻辑方法。
*/
//**********必须使用self=此*******************
//此引用vue应用程序。必须将其传递给self，然后传递到回调函数（成功回调）
var self=这个；
//显示v数据表进度条
self.progress\u bar\u load=true
获取（getUser\u url）
.然后（功能（响应）
{
//如果此处出现js错误，则可能是coldfusion服务器输出错误消息，而不是有效的json
//因此，请检查coldfusion服务器响应。
返回response.json（）；
})
.然后（函数（结果）{
//------------------------属性设置为小写----------------------
/*
结果=[{“全名”：“xXx”}，{}，{}……{}]
结果为大写，必须将所有属性转换为小写，
结果=[{“全名”：“xXx”}，{}，{}……{}]
但是，密码或数字等值必须保持不变。
*/
//结果=[{}，{}，{}……{}]
var结果_较低_属性=[]；
var arrayLength=结果长度；
对于（变量i=0；i您可以使用watcher继续监视数据阵列，以便在填充数据阵列后可以隐藏进度条 模板：
<v-progress-linear v-show="isLoading"></v-progress-linear>
data: () => ({
isLoading: true,
data:[]
}),
watch() {
data(){
this.isLoading = false
}
}
<template slot='no-data'>
<v-progress-linear slot='progress' indeterminate></v-progress-linear>
</template>
这一切都可以通过
<v-progress-linear v-show="isLoading"></v-progress-linear>
data: () => ({
isLoading: true,
data:[]
}),
watch() {
data(){
this.isLoading = false
}
}
<template slot='no-data'>
<v-progress-linear slot='progress' indeterminate></v-progress-linear>
</template>
下的模板中添加
<
<v-alert :value="true" color="info" icon="warning" class="mb-4">Loading data...</v-alert>