How can I toggle one state only and undo it when I toggle the next (VueJS) - vue.js

Question

First, I apologize for the way I phrased the question. I couldn't find a way to word it in one sentence. So, allow me to explain.
I have an API with thousands of items being looped in a v-for. The user will select one and only one at a time from the collection. And upon clicking on it will show on a separate place along with some other data (* so it's not a case of string interpolation. It's an object. I'm just simplifying the code in my jsfiddle to make it less confusing and run without dependencies)
I added a boolean property to the API to toggle it true/false and a method function that does the toggle. And with the help of some v-if and v-show directives I'm hiding the other elements from rendering when they are false.
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4#m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" #click="selectWS(workstations, pod)">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
</div>
</div>
</div>
<div class="uk-width-1-4#m">
<div>2. Selected Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id" v-show="pod.selected===true">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" v-show="workstations.selected===true">
<div v-if="workstations.selected === true">
<div class="group">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
<div class="ws ws-number uk-text-default">{{workstations.text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in the script
methods: {
selectWS(workstations, pods) {
pods.selected = !pods.selected;
workstations.selected = !workstations.selected;
}
}
However, not only it is very messy and rookie. It's buggy. The only way it works is if the user clicks on one item to show it, and clicks it again to toggle it off before clicking another one to turn it on. That's far from user-friendly.
How can I resolve this in a cleaner and professional way so that if the user clicks on 1.1, it shows 1.1 and if he wants to see 1.2, all he has to do is click on 1.2 without having to turn off 1.1 first?
Here's a JSFIDDLE replicating my problem
Thanks guys. Being the only Vue dev in this place is tough.

Answer 1

Agree with IVO, instead of tracking in-item, use a value(or two) to track selection
The only reason I'm posting separate answer is that I'd recommend using a computed value if you need to have the selected instance available as an object.
new Vue({
el: "#app",
data: {
workstation: null,
pod: null,
pods: [
{
id: "pod1",
number: 1,
selected: false,
"workstations": [
{
id: "ws11",
number: "1.1",
text: "Some text",
selected: false,
close: false
},
{
id: "ws12",
number: "1.2",
text: "Some text",
selected: false,
close: false
},
{
id: "ws13",
number: "1.3",
text: "Some text",
selected: false,
close: false
}
]
},
{
id: "pod2",
number: 2,
selected: false,
"workstations": [
{
id: "ws21",
number: "2.1",
text: "Some text",
selected: false,
close: false
},
{
id: "ws22",
number: "2.2",
text: "Some text",
selected: false,
close: false
},
{
id: "ws23",
number: "2.3",
text: "Some text",
selected: false,
close: false
}
]
}
]
},
computed: {
selection(){
if(this.workstations !== null && this.pod !== null){
let s = this.pods.filter(p => p.id === this.pod).map(p => {
let r = {...p}
r.workstations = p.workstations.filter(w => w.id === this.workstation)
return r
})
if (s.length === 1) return s[0]
}
return false
}
},
methods: {
selectWS(workstations, pods) {
if (this.pod == pods.id && this.workstation == workstations.id){
this.pod = null;
this.workstation = null;
} else{
this.pod = pods.id;
this.workstation = workstations.id;
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4#m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" #click="selectWS(workstations, pod)">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
</div>
</div>
</div>
<div class="uk-width-1-4#m">
<div>2. Selected Item</div>
<div v-if="selection" class="pods">
<div class="ws-in-col">
<div v-if="selection.workstations.length > 0">
<div class="group">
<div class="ws ws-number uk-text-default">{{selection.workstations[0].number}}</div>
<div class="ws ws-number uk-text-default">{{selection.workstations[0].text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

You have to simply set the last selected pod/workstation and then show its properties (please run the snippet in full page otherwise you will be unable to see the right column):
new Vue({
el: "#app",
data: {
selectedPod: null,
selectedWorkstation: null,
pods: [
{
id: "pod1",
number: 1,
selected: false,
"workstations": [
{
id: "ws11",
number: "1.1",
text: "Some text 1",
selected: false,
close: false
},
{
id: "ws12",
number: "1.2",
text: "Some text 2",
selected: false,
close: false
},
{
id: "ws13",
number: "1.3",
text: "Some text 3",
selected: false,
close: false
}
]
},
{
id: "pod2",
number: 2,
selected: false,
"workstations": [
{
id: "ws21",
number: "2.1",
text: "Some text 4",
selected: false,
close: false
},
{
id: "ws22",
number: "2.2",
text: "Some text 5",
selected: false,
close: false
},
{
id: "ws23",
number: "2.3",
text: "Some text 6",
selected: false,
close: false
}
]
}
]
},
methods: {
selectWS(workstation, pod) {
this.selectedPod = pod;
this.selectedWorkstation = workstation;
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4#m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id">
<div class="ws-in-col" v-for="workstation in pod.workstations" :key="workstation.id" #click="selectWS(workstation, pod)">
<div class="ws ws-number uk-text-default">
{{workstation.number}}
{{workstation.text}}
</div>
</div>
</div>
</div>
<div class="uk-width-1-4#m">
<div>2. Selected Item</div>
<div class="pods" v-if="selectedWorkstation">
<div class="ws-in-col">
<div>
<div class="group">
<div class="ws ws-number uk-text-default">{{selectedWorkstation.number}}</div>
<div class="ws ws-number uk-text-default">{{selectedWorkstation.text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>