I am facing an issue with a data property called editMode set on a Vueity Card. When I click on a button, the editMode switches to true and an icon appears on the v-img. However, I want to adjust the opacity of the image to 0.3 when editMode is true, without affecting the icon. How can I achieve this?
You can view the code on CodePen.
Please refer below for the code snippet:-
new Vue({
el: "#app",
data() {
return {
editMode: false
};
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43353626372a253a03726d766d7277">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6d6e7e6f727d625b2a352e352a2f">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire" dark>
<v-container>
<v-layout>
<v-flex xs6>
<v-card>
<v-img :style="editMode ? 'opacity: 0.3' : ''" src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
<v-container v-if="editMode">
<v-layout align-center justify-center row fill-height>
<v-icon class="mt-5" color="white" large>create</v-icon>
</v-layout>
</v-container>
</v-img>
</v-card>
<v-btn large @click="editMode = !editMode"> Edit Mode </v-btn>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>Currently, both the icon and the image have their opacities set to 0.3 when editMode is true. Any suggestions on how to solve this problem would be greatly appreciated. Thank you.