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

435
August 17, 2019, at 06:40 AM

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.

Answer 1

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>
Rent Charter Buses Company
READ ALSO
Is it possible to have Testcafe remember an h1 or a text from a previous page so I can match/compare it in another page?

Is it possible to have Testcafe remember an h1 or a text from a previous page so I can match/compare it in another page?

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

144
How to send different AJAX URL if input is empty

How to send different AJAX URL if input is empty

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

123
a Regex to filter an arithmetic expression, prevent multiple consecutive symbols

a Regex to filter an arithmetic expression, prevent multiple consecutive symbols

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

144
How to apply easing functions to this jumping wave animation

How to apply easing functions to this jumping wave animation

I have this animation using Mathsin: (draw function is called many times with increasing tick value)

136