cssvuejs3vuetify.js

How to make invisible (remove) some parts of Vuetify components in Vue 3 app by using CSS?

We use Vuetify components in our Vue 3 app and I'd like to make invisible (remove) some parts of them in "view" mode. Please, take a look at the folllowing screen shot.

enter image description here

You can see v-select component with arrow and 2 v-textarea components with small triangle. I'd like to make them invisible (remove) in "view" mode. How to do it?

Solution

  • You can hide v-select's arrow with css and applying a dynamic class

    <v-select v-model="model" :items="items" :class="{'hidden': viewMode}" />

    <style>
.hidden .v-field__append-inner {
  display: none;
}
</style>

    But it won't stop user from editing it. User can still click anywhere on the field and the dropdown will show. If you want it to not be editable you can use the disabled prop of v-select.

    <v-select
    v-model="model"
    :items="items"
    :disabled="viewMode"/>

    As for v-textarea there is a "no-resize" prop which you can toggle if user is in view mode. Content is still editable though like v-select.

    <v-textarea
    v-model="text"
    :no-resize="viewMode"
/>

    Check the Playground.