如何在 Vuetify 中隐藏所有 v-text-fields？

【问题标题】：How do I hide all v-text-fields in Vuetify?如何在 Vuetify 中隐藏所有 v-text-fields？
【发布时间】：2018-07-19 14:17:38
【问题描述】：

我正在尝试隐藏弹出对话框中的文本字段，以重新利用相同的组件进行编辑和删除功能。基本上我正在操作对话框的标题，但对于删除功能，我希望用户只看到标题。但我找不到任何选项来隐藏 Vuetify 上的所有文本字段。

HTML

<v-text-field
   v-model="entryData[item]"
   :label="getLabel(item)"
   :disabled="setDisable(item)">
</v-text-field>

设置禁用功能

setDisable (colName) {
  return this.entryState === 'read' || colName.toLowerCase().indexOf('id') !== -1;
},

像禁用一样有没有可见性的选项？

【问题讨论】：

【解决方案1】：

你可以使用v-if

<v-text-field
   v-model="entryData[item]"
   :label="getLabel(item)"
   v-if="setDisable(item)">
</v-text-field>

或v-show

<v-text-field
   v-model="entryData[item]"
   :label="getLabel(item)"
   v-show="setDisable(item)">
</v-text-field>

两者的区别在于v-if隐藏组件不会被添加到你的DOM中，而v-show组件被添加，但使用样式设置为隐藏。

附带说明，如前面问题中所述，请尽量避免调用模板中的函数。这将触发每次在完整树上重新渲染，因为函数响应没有被缓存。将这些值存储在计算中通常是要走的路。您可以在对象中存储多个属性，并且您已经拥有entryData，因此您可以调整是否包含其他参数。

【讨论】：