I have a popBox for adding data and when I click the button a window opens in which I enter data while the background is a little bit obscured with opacity.
<div :class="[!popBox ? 'opacity-100' : 'opacity-60']">
This code works perfectly, but I want also to be able to delete data with another popup box saying "do you want delete data" with two buttons.
My question is how can I merge the two below class bindings?
<div :class="[!popBox ? 'opacity-100' : 'opacity-60']">
<div :class="[!popDeleteBox ? 'opacity-100' : 'opacity-60']">
You just need to update it to
<p :class="[!popBox ? 'opacity-100' : 'opacity-60', !popDeleteBox ? 'opacity-100' : 'opacity-60']"></p>
You could use class bindings, with v-bind:class
<p v-bind:class="{ 'opacity-60': popBox || popDeleteBox, 'opacity-100': !popBox && !popDeleteBox, }"></p>
Or, just as a string
<p :class="`${!popBox ? 'opacity-100' : 'opacity-60'} ${!popDeleteBox ? 'opacity-100' : 'opacity-60'}`"></p>