如何关闭自动完成 (v-autocomplete) 上的线性进度条 (v-progress-linear)？

Question

Vuetify 自动完成组件 v-autocomplete 通过设置 v-autocomplete 的 loading 属性带有内置 v-progress-linear 即 "turned on" :

<v-autocomplete ref="control1" loading>
   <!-- redacted for brevity --> 
</v-autocomplete>

...就像衬衫上的口袋一样方便，但我装完东西后无法关闭这个愚蠢的东西：

this.$refs.control1.loading = false;
this.$refs.control1.loading = null;

...这些似乎都不起作用。它只是坐在那里，尽管我尽了最大的努力去消除它，但它仍在不确定地前进。

我忽略了什么？

Answer 1

不是忽视，是想多了:)

您也可以在布尔属性上使用 v-bind 指令。

尝试这样的事情：

<template>
   <v-autocomplete ref="control1" :loading="showProgress">
      <!-- redacted for brevity --> 
   </v-autocomplete>
   <button @click="hideProgres">Hide Progress Linear</button>
</template>

<script>
export default {
  data() {
    return {
      showProgress: true
    }
  },
  methods: {
    hideProgress() {
      this.showProgress = false;
    }
}
</script>

然后当你想隐藏 v-progress-linear 组件时只需调用 this.hideProgress()

编辑：值得注意的是，您永远不应该尝试以上游方式更改 props（从其 props 需要更改的组件），您应该始终以下游方式更改它们（从作为其父组件的组件）需要更改 props 的组件）。

如何关闭自动完成 (v-autocomplete) 上的线性进度条 (v-progress-linear)？

How to Dismiss the Linear Progress Bar (v-progress-linear) on an Autocomplete (v-autocomplete)?

javascript

autocomplete

vuetify.js