title: VueJS Using @click on <option> elements and @change on <select> element
body: <p>I have a simple function that manipulates a data between true and false. I use it to make my div hidden and visible like a toggle. I also have a  with three  element. I found out that I cannot use <code>@click</code> for <code>&lt;option&gt;</code> elements, I need to use <code>@change</code> for my <code>&lt;select&gt;</code>.</p>
  <p>But in this way, whenever an  is selected, the function is being triggered and my data toggles between true and false. Here is my <code>&lt;select&gt;</code> element;</p>
  <pre><code>       &lt;select @change=&quot;isDisabled&quot;&gt;
            &lt;option&gt;Please select a security type&lt;/option&gt;
            &lt;option&gt;No Security&lt;/option&gt;
            &lt;option&gt;Personal&lt;/option&gt;
            &lt;option&gt;Enterprise&lt;/option&gt;
         &lt;/select&gt;
  </code></pre>
  <p>IsDisabled function takes a variable and change its values between true and false so my div becomes hidden and visible as follows;</p>
  <pre><code>&lt;div v-if=&quot;noSecurity&quot;&gt;something&lt;/div&gt;
  </code></pre>
  <p>But here is the thing, I only want to trigger the function when the user select the &quot;No Security&quot; option. Now it's being triggered whenever I select an option, so it turned out to be some kind of a toggle. But I want to hide the div when I select the &quot;No Security&quot; option and show the div if something different is selected. What should I do?</p>