0

I have the simplest method and I have used this method many times before, but even though I used the same method, it doesn't work in the component I'm working on right now. Here is what I want;

I have two checboxes;

<input type="checkbox" class="blacklist" v-model="blacklist" @change="listChanger();"/>
<input type="checkbox" class="whitelist" v-model="whitelist" @change="listChanger();"/>

My data;

data() {
  return {
    whitelist: false,
    blacklist: false,
  };
},

They are set as closed at the default state. When they are turned to true, they show some div on the page;

<div v-if="blacklist">
   something something...
</div>

<div v-if="whitelist">
   something something...
</div>

The thing is that whitelist and showlist cannot be true at the same time, in other words, their divs cannot be visible at the same time. When one of them is true, the other one should be false automatically. Here is my method to do that;

METHODS UPDATED:

listChanger(){
    if(this.whitelist == true){
        this.blacklist = false;
    }
    else if(this.blacklist == true){
        this.whitelist = false;
    }
},

The above method is working when you first check blacklist, then check whitelist. The method is being triggered by the checkboxes so when blacklist is true first, then whitelist is true, the method goes and unchecks the blacklist as it should be. But the other scenario still off.

Let's say I checked the blacklist first, then I go and checked whitelist, I want blacklist to be closed, and whitelist to be visible. The same scenario is also needed when whitelist is checked first. I know I'm missing some little things here but I couldn't figure. I tried to use the if statements in the updated() hook, it works but once one of them is turned to false, I cannot use that one again, I mean it's not clickable anymore because the other one is true. As long as one of them is true, it does not let me click the other one. My question is simple but I couldn't figure it out yet so any help would be appreciated.

Yasin Demirkaya
  • 243
  • 6
  • 22

2 Answers2

1

Kissu already provided a solution but I found some interesting things I wanted to point out.

If you were new to this problem and you read the question you would conclude that there are two states: ( 1. show blacklist and 2. show whitelist ) and that these states are exclusive, meaning that only one state may be active at a given time. If one thing is true then the other thing must not be true.

The important conclusion to derive from this is that there should only be one active state to store in a variable.

The author started out with two variables, two variables that are independent of each other. Then he realized that these should not be independent of each other and tried to force that relationship with extra code and functions, making the program more complex and difficult to manage.

The important takeaway here is sometimes it is worthwhile to take a step back and formulate in clear words what you are trying to achieve, and maybe you will see a simpler approach that works elegantly.

Joshua Angnoe
  • 1,010
  • 4
  • 11
0

You could maybe have

<input type="checkbox" class="blacklist" v-model="blacklist" />
<input type="checkbox" class="whitelist" v-model="whitelist" />

...

<div v-if="blacklist">
   // in case it is blacklisted
</div>

<div v-if="whitelist && !blacklist">
   // in case it is whitelisted
</div>

Depending of your use case, using a v-show could be a good idea too.
Vue's guide on: v-if-vs-v-show

tony19
  • 125,647
  • 18
  • 229
  • 307
kissu
  • 40,416
  • 14
  • 65
  • 133
  • If I use v-if="!blacklist" it will display the whitelist content all the time unless it is blacklist. I only want to display whitelist when its data is true, and I only want to display blacklist when its data is true. And plus, I just want them unable to be true at the same time. So this is not a valid answer sadly. – Yasin Demirkaya Jan 07 '21 at 09:50
  • Oh yeah, it's not a radio button indeed. My bad ! Edited to reflect the question's goals. – kissu Jan 07 '21 at 09:52
  • So the listChanger() method should remain the same? If I do it like this, still my checkboxes will look checked at the same time. The right way to do it toggling between true and false for two data on their own. There is only a small problem in my method but I still couldn't figure out yet. The rest is will be the same. No need to change the v-if like in your answer. – Yasin Demirkaya Jan 07 '21 at 09:58
  • @YasinDemirkaya you don't even need it anymore tbh. – kissu Jan 07 '21 at 09:58