How To Add Disabled Attribute In Input Text In Vuejs?

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 inpu

Solution 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:

<inputtype="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:

<buttonv-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

Solution 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
  }
},

Solution 3:

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">