title: How to properly use a ternary expression with @click event in Vue.js
body: <p>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 <code>job_execs</code> 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.</p>
  
  <pre><code>&lt;template&gt; 
    &lt;td&gt;
      &lt;div v-for="release in release_versions" :key="release"&gt;
        &lt;li&gt;
          &lt;span @click="showRelease = showRelease === release.version ? '' : release"&gt;
            Release {{ release.version }}
          &lt;/span&gt;
          &lt;ul v-if="showRelease === release.version"&gt;
            {{ release.job_execs }}
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  export default {
    name: 'LatestBuilds',
    data() {
      return {
        release_versions: [
          { version: '1', job_execs: [] },
          { version: '2', job_execs: [] },
        ],
        showRelease: false,
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Important things to note:</p>
  
  <ul>
  <li><p><code>job_execs</code> is populated with data, I'm just not showing it in the OP;</p></li>
  <li><p>the numbers of versions and <code>job_execs</code> are always changing;</p></li>
  <li><p>I'd rather not use a ternary expression if at all possible, just not 
  sure how else to do this.</p></li>
  </ul>