How to add disabled attribute in input text in vuejs?

2
votes

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>
3
javascriptvue.jsvue-router

3 Answers

4
votes

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
  }
},
5
votes

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://vuejs.org/v2/guide/syntax.html#Attributes

0
votes

Try this one:

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