Menu
I have an input:
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled" /> and in my Vue.js component, I have:
.. .. ready() { this.form.name = this.store.name; this.form.validated = this.store.validated; }, .. validated being a boolean, it can be either 0 or 1, but no matter what value is stored in the database, my input is always disabled.
I need the input to be disabled if false, otherwise it should be enabled and editable.
Update:
Doing this always enables the input (no matter I have 0 or 1 in the database):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled" /> Doing this always disabled the input (no matter I have 0 or 1 in the database):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''" /> 
431
To disable a button in Vue. js, we set the disabled prop of the button. to set the disabled prop to the isDisabled reactive property. Therefore, the disabled attribute will be added to the button only if isDisabled is true .
Vue Button component can be enabled/disabled by giving disabled property. To disable Vue Button component, the disabled property can be set as true .
To conditionally disable a button element in Vue. js, you can dynamically bind the disable attribute to an expression that evaluates to boolean true (to disable the button) or false (to enable the button).
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable. Tip: Disabled <input> elements in a form will not be submitted!
To remove the disabled prop, you should set its value to false. This needs to be the boolean value for false, not the string 'false'.
So, if the value for validated is either a 1 or a 0, then conditionally set the disabled prop based off that value. E.g.:
<input type="text" :disabled="validated == 1"> Here is an example.
var app = new Vue({ el: '#app', data: { disabled: 0 } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button> <input type="text" :disabled="disabled == 1"> <pre>{{ $data }}</pre> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
