Inline invert boolean @click in Vue.js
<p>For a simple demo I wanted to invert a boolean I defined inside the data property of my Vue.js instance.</p>
<p>What I tried:</p>
<pre class="lang-vue prettyprint-override"><code>&lt;button @click=&quot;!spanVisible&quot; type=&quot;button&quot;&gt;Toggle&lt;/button&gt;
</code></pre>
<p>and</p>
<pre class="lang-vue prettyprint-override"><code>&lt;button @click=&quot;(!spanVisible)&quot; type=&quot;button&quot;&gt;Toggle&lt;/button&gt;
</code></pre>
<p>I want to avoid either writing a separate method or having something like this inside my v-on:click=&quot;&quot;: <code>spanVisible ? !spanVisible : !spanVisible</code> because it's simply redundant.</p>
<p>So now my questions mostly are: Why doesn't the direct inverting work? What other possibility do I have to keep it short and simple?</p>
<p><strong>edit:</strong></p>
<p>The shortest possible variation i found right now is using <code>spanVisible = !spanVisible</code>, but not sure if that's the most concise version available.</p>
<p><strong>SOLUTION:</strong></p>
<p>The best solution I found was suggested by @Sombriks in the comments:
using <code>@click=&quot;!spanVisible&quot;</code> only evaluates the inversed value of <code>spanVisible</code> but doesn't alternate it's value, to assign a new value to it you can use <code>@click=&quot;spanVisible = !spanVisible&quot;</code>, which seems to be the most concise working version for now.</p>