vuejs disable button depending array length
0
I am trying to disable/enable a button depending of an array length and so, my code is the following:
<button class="submit-button"
type="button"
v-on:click="DoSomething()"
:disabled="array.length > 0">Submit</button>
Although, this doesn't work and as response I have the warning:
array.length > 0 is not a valid value of attribute 'disabled'
Is there any different syntax to enable/disable a button regarding an array length?
Any help is welcome
vue.js vue-component
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
|
show 6 more comments
0
I am trying to disable/enable a button depending of an array length and so, my code is the following:
<button class="submit-button"
type="button"
v-on:click="DoSomething()"
:disabled="array.length > 0">Submit</button>
Although, this doesn't work and as response I have the warning:
array.length > 0 is not a valid value of attribute 'disabled'
Is there any different syntax to enable/disable a button regarding an array length?
Any help is welcome
vue.js vue-component
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
length starts from 1.
– Bhojendra Rauniyar
Nov 21 '18 at 13:12
3
@BhojendraRauniyar wow insightful comment :P
– Badgy
Nov 21 '18 at 13:23
1
The problem is not in your code sample, using your code sample works fine. Here is a Fiddlehttps://jsfiddle.net/koLjsux6/with your Code Sample. Please include other relevant code for us.
– Badgy
Nov 21 '18 at 13:29
1
@BhojendraRauniyar Ahhh wait im dumb now I get what you mean, yes the length will always be greater than 0 but if you say it like that ´>` is asNOT VALIDas>=
– Badgy
Nov 21 '18 at 13:39
1
The mistake isn't related to your button element. I copy/pasted your code into a fresh vue app and it's working without errors: codesandbox.io/s/qlm75pj61q Seems like the v-bind directive :disabled isn't receiving the value it's supposed to receive (true, false, null, undefined, defined...). You should print out the expression "array.length > 0" to see what it results in, the error must be located in there somewhere.
– van-koelljor
Nov 21 '18 at 14:05
|
show 6 more comments
0
0
0
I am trying to disable/enable a button depending of an array length and so, my code is the following:
<button class="submit-button"
type="button"
v-on:click="DoSomething()"
:disabled="array.length > 0">Submit</button>
Although, this doesn't work and as response I have the warning:
array.length > 0 is not a valid value of attribute 'disabled'
Is there any different syntax to enable/disable a button regarding an array length?
Any help is welcome
vue.js vue-component
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
I am trying to disable/enable a button depending of an array length and so, my code is the following:
<button class="submit-button"
type="button"
v-on:click="DoSomething()"
:disabled="array.length > 0">Submit</button>
Although, this doesn't work and as response I have the warning:
array.length > 0 is not a valid value of attribute 'disabled'
Is there any different syntax to enable/disable a button regarding an array length?
Any help is welcome
vue.js vue-component
vue.js vue-component
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
edited Nov 22 '18 at 6:44
George George
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
asked Nov 21 '18 at 13:10
George GeorgeGeorge George
797
797
length starts from 1.
– Bhojendra Rauniyar
Nov 21 '18 at 13:12
3
@BhojendraRauniyar wow insightful comment :P
– Badgy
Nov 21 '18 at 13:23
1
The problem is not in your code sample, using your code sample works fine. Here is a Fiddlehttps://jsfiddle.net/koLjsux6/with your Code Sample. Please include other relevant code for us.
– Badgy
Nov 21 '18 at 13:29
1
@BhojendraRauniyar Ahhh wait im dumb now I get what you mean, yes the length will always be greater than 0 but if you say it like that ´>` is asNOT VALIDas>=
– Badgy
Nov 21 '18 at 13:39
1
The mistake isn't related to your button element. I copy/pasted your code into a fresh vue app and it's working without errors: codesandbox.io/s/qlm75pj61q Seems like the v-bind directive :disabled isn't receiving the value it's supposed to receive (true, false, null, undefined, defined...). You should print out the expression "array.length > 0" to see what it results in, the error must be located in there somewhere.
– van-koelljor
Nov 21 '18 at 14:05
|
show 6 more comments
length starts from 1.
– Bhojendra Rauniyar
Nov 21 '18 at 13:12
3
@BhojendraRauniyar wow insightful comment :P
– Badgy
Nov 21 '18 at 13:23
1
The problem is not in your code sample, using your code sample works fine. Here is a Fiddlehttps://jsfiddle.net/koLjsux6/with your Code Sample. Please include other relevant code for us.
– Badgy
Nov 21 '18 at 13:29
1
@BhojendraRauniyar Ahhh wait im dumb now I get what you mean, yes the length will always be greater than 0 but if you say it like that ´>` is asNOT VALIDas>=
– Badgy
Nov 21 '18 at 13:39
1
The mistake isn't related to your button element. I copy/pasted your code into a fresh vue app and it's working without errors: codesandbox.io/s/qlm75pj61q Seems like the v-bind directive :disabled isn't receiving the value it's supposed to receive (true, false, null, undefined, defined...). You should print out the expression "array.length > 0" to see what it results in, the error must be located in there somewhere.
– van-koelljor
Nov 21 '18 at 14:05
length starts from 1.
– Bhojendra Rauniyar
Nov 21 '18 at 13:12
length starts from 1.
– Bhojendra Rauniyar
Nov 21 '18 at 13:12
3
3
@BhojendraRauniyar wow insightful comment :P
– Badgy
Nov 21 '18 at 13:23
@BhojendraRauniyar wow insightful comment :P
– Badgy
Nov 21 '18 at 13:23
1
1
The problem is not in your code sample, using your code sample works fine. Here is a Fiddle
https://jsfiddle.net/koLjsux6/ with your Code Sample. Please include other relevant code for us.– Badgy
Nov 21 '18 at 13:29
The problem is not in your code sample, using your code sample works fine. Here is a Fiddle
https://jsfiddle.net/koLjsux6/ with your Code Sample. Please include other relevant code for us.– Badgy
Nov 21 '18 at 13:29
1
1
@BhojendraRauniyar Ahhh wait im dumb now I get what you mean, yes the length will always be greater than 0 but if you say it like that ´>` is as
NOT VALID as >=– Badgy
Nov 21 '18 at 13:39
@BhojendraRauniyar Ahhh wait im dumb now I get what you mean, yes the length will always be greater than 0 but if you say it like that ´>` is as
NOT VALID as >=– Badgy
Nov 21 '18 at 13:39
1
1
The mistake isn't related to your button element. I copy/pasted your code into a fresh vue app and it's working without errors: codesandbox.io/s/qlm75pj61q Seems like the v-bind directive :disabled isn't receiving the value it's supposed to receive (true, false, null, undefined, defined...). You should print out the expression "array.length > 0" to see what it results in, the error must be located in there somewhere.
– van-koelljor
Nov 21 '18 at 14:05
The mistake isn't related to your button element. I copy/pasted your code into a fresh vue app and it's working without errors: codesandbox.io/s/qlm75pj61q Seems like the v-bind directive :disabled isn't receiving the value it's supposed to receive (true, false, null, undefined, defined...). You should print out the expression "array.length > 0" to see what it results in, the error must be located in there somewhere.
– van-koelljor
Nov 21 '18 at 14:05
|
show 6 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412795%2fvuejs-disable-button-depending-array-length%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412795%2fvuejs-disable-button-depending-array-length%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
length starts from 1.
– Bhojendra Rauniyar
Nov 21 '18 at 13:12
3
@BhojendraRauniyar wow insightful comment :P
– Badgy
Nov 21 '18 at 13:23
1
The problem is not in your code sample, using your code sample works fine. Here is a Fiddle
https://jsfiddle.net/koLjsux6/with your Code Sample. Please include other relevant code for us.– Badgy
Nov 21 '18 at 13:29
1
@BhojendraRauniyar Ahhh wait im dumb now I get what you mean, yes the length will always be greater than 0 but if you say it like that ´>` is as
NOT VALIDas>=– Badgy
Nov 21 '18 at 13:39
1
The mistake isn't related to your button element. I copy/pasted your code into a fresh vue app and it's working without errors: codesandbox.io/s/qlm75pj61q Seems like the v-bind directive :disabled isn't receiving the value it's supposed to receive (true, false, null, undefined, defined...). You should print out the expression "array.length > 0" to see what it results in, the error must be located in there somewhere.
– van-koelljor
Nov 21 '18 at 14:05