How to properly use a ternary expression with @click event in Vue.js

Question

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.

are you sure you want a triple comparison operator? You initial value is false but you are comparing booleans, and strings. — Get Off My Lawn
– Get Off My Lawn, Commented Aug 16, 2019 at 19:05
I just want to click on a version and get the job executions for that version in the cleanest way possible — benjaminadon
– benjaminadon, Commented Aug 16, 2019 at 19:06
Also its better to keep computations out of markup. You can have a method call @click="changeRelease(release)", pass in the parameter and change that data prop in the method. — ambianBeing
– ambianBeing, Commented Aug 16, 2019 at 19:07
You don't need a ternary operator here, just do showRelease = release.version and then it will work. — Get Off My Lawn
– Get Off My Lawn, Commented Aug 16, 2019 at 19:13
@GetOffMyLawn I think his goal is to allow the user to toggle showing the release versions (an accordion). — tony19
– tony19, Commented Aug 16, 2019 at 19:16

tony19 · Accepted Answer · 2022-07-15 23:07:13Z

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>

Collectives™ on Stack Overflow

How to properly use a ternary expression with @click event in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related