如何隐藏Vuetify中的所有v文本字段？

Question

我试图在弹出的对话框中隐藏文本字段，以将同一组件用于“编辑和删除功能”。基本上，我在操纵对话框的标题，但是对于删除功能，我希望用户仅看到标题。但是我找不到任何隐藏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;
},

像禁用一样，有可见性选项吗？

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，因此可以进行调整以包括其他参数。