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

Question

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

超文本标记语言

<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;
},

就像禁用一样，是否有任何可见性选项？

Answer 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，因此您可以调整以包含其他参数。