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_execs
is populated with data, I'm just not showing it in the OP;
the numbers of versions and job_execs
are 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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I am trying to do a smoke test on a web page and essentially if I can somehow get Testcafe to remember "Hello World" from page 1 and go to a User Profile to match that same element with the text "Hello World" then I can make it work for all the other cases I will have
I'm making a live search with AJAX that searches all the rows of the SQL column called number and sorts by numberBut I cant figure out how to change the SQL sort to another column called wt when the input is empty
I have an arithmetic expression, it might have multiple consecutive signs (1++2-3) this would create an error in the "eval()" function, i want to remove only the extra repetitions of the sign and keep only one
I have this animation using Mathsin: (draw function is called many times with increasing tick value)