I am trying to add style to this <label> tag on Vue.
<div class="grid grid-cols-1 mt-5 mx-7">
<label class="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1 flex items-center justify-center">Upload Photo</label>
<div class='flex items-center justify-center w-full'>
<label id="img1" class='flex flex-col border-4 border-dashed w-40 h-32 hover:bg-gray-100 hover:border-purple-300 group'>
<div @click="onPrimaryPicSelected" class='flex flex-col items-center justify-center pt-7'>
<svg class="w-10 h-10 text-purple-400 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<p class='lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider'>Select a photo</p>
</div>
<input type='file' class="hidden" />
</label>
</div>
</div>
I want that when the onPrimaryPicSelected function is called to add a CSS styling to the <label> tag. How can I do this if it is possible?
Currently the onPrimaryPIcSelected just gets the image that was uploaded.
onPrimaryPicSelected(event) {
this.primaryPhoto = event.target.files[0];
this.primaryPhotoUrl = URL.createObjectURL(event.target.files[0]);
},
You can use a boolean variable if true it will apply your style to the label tag.
<div class="grid grid-cols-1 mt-5 mx-7">
<label class="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1 flex items-center justify-center" :style="selected ? 'your-style-here' : ''">Upload Photo</label>
<div class='flex items-center justify-center w-full'>
<label id="img1" class='flex flex-col border-4 border-dashed w-40 h-32 hover:bg-gray-100 hover:border-purple-300 group'>
<div @click="onPrimaryPicSelected" class='flex flex-col items-center justify-center pt-7'>
<svg class="w-10 h-10 text-purple-400 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<p class='lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider'>Select a photo</p>
</div>
<input type='file' class="hidden" />
</label>
</div>
</div>
then in your function
onPrimaryPicSelected(event) {
this.selected = true;
this.primaryPhoto = event.target.files[0];
this.primaryPhotoUrl = URL.createObjectURL(event.target.files[0]);
},