title: How to add disabled attribute in input text in vuejs?
body: <p>I have 2 urls  </p>
  
  <ul>
  <li><p><code>/register</code>  </p></li>
  <li><p><code>/register?sponsor=4</code>  </p></li>
  </ul>
  
  <p>The <code>/register</code> route will give me a clean input text in which I can type everything<br>
  and the second route will bring a the same input but it has a value of 4 and it's disabled so users cannot modify it.<br>
  I managed to get params from router dynamic using vue-router and everything is fine,<br>
  but when I visit <code>/register</code> I get the clean input but as soon as I start typing the input will be disabled and I can only type one character.<br>
  This what I tried so far,<br>
  <strong>HTML :</strong></p>
  
  <pre><code>&lt;input :disabled="sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14"&gt;  
  </code></pre>
  
  <p><strong>Javascript vuejs</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var router = new VueRouter({
          mode: 'history',
          routes: []
      });
      new Vue({
          router,
          el: '#app',
          data () {
              return {
                  cities: [],
                  city: '',
                  selectedCountry: '',
                  sponsor: null
              }
          },
          mounted: function() {
              if (this.$route.query.sponsor) {
                  this.sponsor = this.$route.query.sponsor
                  console.log(this.sponsor)
              }
          },
          methods: {
              onChangeCountry() {
                  axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
                  .then(response =&gt; this.cities = response.data)
                  .catch(error =&gt; console.log(error))
              }
          }
      });
  &lt;/script&gt;
  </code></pre>