How to add disabled attribute in input text in vuejs?

Question

I have 2 urls

• /register

• /register?sponsor=4

The /register route will give me a clean input text in which I can type everything
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.
I managed to get params from router dynamic using vue-router and everything is fine,
but when I visit /register I get the clean input but as soon as I start typing the input will be disabled and I can only type one character.
This what I tried so far,
HTML :

<input :disabled="sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14">  

Javascript vuejs

<script type="text/javascript">
    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 => this.cities = response.data)
                .catch(error => console.log(error))
            }
        }
    });
</script>

Answer 1

disabled is not a Boolean attribute.

The mere presence of the attribute means that the input is disabled .

The only allowed attribute values for disabled are "disabled" and "" .

So these three variations are legal to create a disabled input:

<input disabled ... />

or

<input disabled="" ... />

or

<input disabled="disabled" ... />

If you do

<input disabled="false" ... /> 

that will still disable the input simply because the attribute disabled is on it - on top of being invalid HTML because of an illegal attribute value.

Check it out here:

 <input type="text" disabled="false" />

So to solve your problem you need to find a way to not create the attribute on the input in case you don't want to disable it.

Edit: Turns out Vue.js creators have prepared this:

In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently. In this example:

 <button v-bind:disabled="isButtonDisabled">Button</button>

If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered element.

https://v2.vuejs.org/v2/guide/syntax.html#Attributes

Answer 2

The problem here is that you are binding the input value to sponsor with v-model="sponsor" , so when you star typing, the sponsor get the value and disable the input,

you have to set a flag to know if the value of sponsor comes from the route, and apply the disable logic with that flag. Or directly use the $route.query.sponsor on the :disabled ( :disabled="$route.query.sponsor" )

<input :disabled="isFromRoute" v-model="sponsor" />

mounted: function() {
  if (this.$route.query.sponsor) {
    this.sponsor = this.$route.query.sponsor
    this.isFromRoute = true //set the flag, make sure to have it in your data section
  }
},

Answer 3

试试这个：

<input :disabled="$route.query.sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14">