How to properly use a ternary expression with @click event in Vue.js
I'm showing a list of release versions, but the part I'm stuck on is I want to be able to click the release version and show the job_execs for that version. I'm not sure how to do this other than using a ternary expression and binding it to click event. Anyway, what I'm trying to do is not working because nothing changes when I click the versions.
<template>
<td>
<div v-for="release in release_versions" :key="release">
<li>
<span @click="showRelease = showRelease === release.version ? '' : release">
Release {{ release.version }}
</span>
<ul v-if="showRelease === release.version">
{{ release.job_execs }}
</ul>
</li>
</div>
</td>
</template>
<script>
export default {
name: 'LatestBuilds',
data() {
return {
release_versions: [
{ version: '1', job_execs: [] },
{ version: '2', job_execs: [] },
],
showRelease: false,
}
},
}
</script>
Important things to note:
job_execsis populated with data, I'm just not showing it in the OP;the numbers of versions and
job_execsare always changing;I'd rather not use a ternary expression if at all possible, just not sure how else to do this.
I would recommend you use a Method here, instead of adding this logic inside the @click attr.
To actually output the selected release's job_execs, you'll need another v-for inside the ul.
Something like the following should work:
<template>
<td>
<div v-for="release in release_versions" :key="release">
<li>
<span @click="selectRelease(release.version)">
Release {{ release.version }}
</span>
<ul v-if="selectedVersion === release.version">
<li v-for="job_exec in release.job_execs">
{{ job_exec }} <!-- use job_exec data if this is an object -->
</li>
</ul>
</li>
</div>
</td>
</template>
<script>
export default {
name: 'LatestBuilds',
data() {
return {
release_versions: [
{ version: '1', job_execs: [] },
{ version: '2', job_execs: [] },
],
selectedVersion: null,
}
},
methods: {
selectRelease(version) {
this.selectedVersion = version
}
},
}
</script>
-
05:30
-
04:00
-
00:00
-
10:30
-
9:10
-
07:40
Firebase Cloud Functions: PubSub, "res.on is not a function"
-
04:00
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
-
9:20
-
7:40
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 111358 visits
- search for elements in a list 111041 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98801 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 96299 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 92491 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 62013 visits
- Adding methods to es6 child class 22362 visits
