title: How to enable / disable an input with a select VueJS
body: <p>Question originally <a href="https://es.stackoverflow.com/questions/276003/habilitar-deshabilitar-un-input-con-un-select">posted (in Spanish) on es.stackoverflow.com</a> by <a href="https://es.stackoverflow.com/users/123821/jos%c3%a9">José</a>:</p>
  <blockquote>
  <p>I have seen the example in JavaScript, and yes, it works and
  everything but as I can do it in <strong>vue.js</strong>, I've been trying for a
  while and it does not work. Sorry for the inconvenience.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;p&gt;{{ name }}&lt;/p&gt;
    &lt;input type="text" v-model="name"/&gt;
    &lt;button type="submit" :disabled="name == defaultName"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  
  &gt; </code></pre>
  </div>
  </div>
  </p>
  <p><strong>Javascript</strong></p>
  <pre><code>    $(document).ready(function() {
    $('#id_categoria').change(function(e) {
      if ($(this).val() === &quot;1&quot;) {
        $('#d').prop(&quot;disabled&quot;, true);
      } else {
        $('#d').prop(&quot;disabled&quot;, false);
      }
    })
  });
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;select name='id_categoria' id='id_categoria' &gt;
      &lt;option value=&quot;1&quot; selected&gt;Clientes&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Empresas&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Personas&lt;/option&gt;
    &lt;/select&gt;
    &lt;input id=&quot;d&quot; disabled=&quot;disabled&quot; type=&quot;text&quot; value=&quot;test&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  <p>I know it's weird that I want to directly manipulate the DOM when you use Vue; I usually let the framework do that, This would be a possible solution</p>
  <p>Of course, if it's a possibilty, you should take advantage of Vue's data-driven reactive nature, as tackling with the DOM is always tricky.</p>
  <p>The solution would be to just create another variable and populate it on</p>
  <pre><code>new Vue({
    el: '#app',
    data: {
      name: 'Hello Vue.js!',
      defaultName: null
    },
    mounted() {
      this.defaultName = this.name;
    }
  </code></pre>