Evaluate a class binding to string?
If I bind a class:
:class="['string-class', {'test-case-class': true}]
It will add both of the classes above, but how can I evaluate the above to a string form. I need to do this as a third party component I am using only accepts strings for a class property.
Edit
I want the above to be able to output: 'string-class test-case-class' just as you would see on a component that :class would be on.
vue.js vuejs2
asked Nov 20 at 16:43
panthro
6,93332100198
|
show 3 more comments
If I bind a class:
:class="['string-class', {'test-case-class': true}]
It will add both of the classes above, but how can I evaluate the above to a string form. I need to do this as a third party component I am using only accepts strings for a class property.
Edit
I want the above to be able to output: 'string-class test-case-class' just as you would see on a component that :class would be on.
vue.js vuejs2
asked Nov 20 at 16:43
panthro
6,93332100198
1
Can you clarify what you mean by evaluate to string form?
– Steven B.
Nov 20 at 16:45
I have edited the original question.
– panthro
Nov 20 at 16:47
1
You need to be more specific about how the component is used, and how it's constructed. It appears you are trying to reproduceVue's compiling process.
– Psidom
Nov 20 at 16:51
Are you saying you have a component / element where you have bound aclassattribute with Vue, and you want to know how to then get the value of that as a string?
– thanksd
Nov 20 at 16:59
2
Can you bind the class to a function that returns a string, rather than to literals? That should give you the string anywhere you can access the function.
– Joe Z
Nov 20 at 17:25
|
show 3 more comments
If I bind a class:
:class="['string-class', {'test-case-class': true}]
It will add both of the classes above, but how can I evaluate the above to a string form. I need to do this as a third party component I am using only accepts strings for a class property.
Edit
I want the above to be able to output: 'string-class test-case-class' just as you would see on a component that :class would be on.
vue.js vuejs2
asked Nov 20 at 16:43
panthro
6,93332100198
If I bind a class:
:class="['string-class', {'test-case-class': true}]
It will add both of the classes above, but how can I evaluate the above to a string form. I need to do this as a third party component I am using only accepts strings for a class property.
Edit
I want the above to be able to output: 'string-class test-case-class' just as you would see on a component that :class would be on.
vue.js vuejs2
vue.js vuejs2
asked Nov 20 at 16:43
panthro
6,93332100198
asked Nov 20 at 16:43
panthro
6,93332100198
edited Nov 20 at 16:47
asked Nov 20 at 16:43
panthro
6,93332100198
asked Nov 20 at 16:43
panthro
6,93332100198
asked Nov 20 at 16:43
panthro
6,93332100198
6,93332100198
1
Can you clarify what you mean by evaluate to string form?
– Steven B.
Nov 20 at 16:45
I have edited the original question.
– panthro
Nov 20 at 16:47
1
You need to be more specific about how the component is used, and how it's constructed. It appears you are trying to reproduceVue's compiling process.
– Psidom
Nov 20 at 16:51
Are you saying you have a component / element where you have bound aclassattribute with Vue, and you want to know how to then get the value of that as a string?
– thanksd
Nov 20 at 16:59
2
Can you bind the class to a function that returns a string, rather than to literals? That should give you the string anywhere you can access the function.
– Joe Z
Nov 20 at 17:25
|
show 3 more comments
1
Can you clarify what you mean by evaluate to string form?
– Steven B.
Nov 20 at 16:45
I have edited the original question.
– panthro
Nov 20 at 16:47
1
You need to be more specific about how the component is used, and how it's constructed. It appears you are trying to reproduceVue's compiling process.
– Psidom
Nov 20 at 16:51
Are you saying you have a component / element where you have bound aclassattribute with Vue, and you want to know how to then get the value of that as a string?
– thanksd
Nov 20 at 16:59
2
Can you bind the class to a function that returns a string, rather than to literals? That should give you the string anywhere you can access the function.
– Joe Z
Nov 20 at 17:25
1
1
Can you clarify what you mean by evaluate to string form?
– Steven B.
Nov 20 at 16:45
Can you clarify what you mean by evaluate to string form?
– Steven B.
Nov 20 at 16:45
I have edited the original question.
– panthro
Nov 20 at 16:47
I have edited the original question.
– panthro
Nov 20 at 16:47
1
1
You need to be more specific about how the component is used, and how it's constructed. It appears you are trying to reproduce
Vue's compiling process.– Psidom
Nov 20 at 16:51
You need to be more specific about how the component is used, and how it's constructed. It appears you are trying to reproduce
Vue's compiling process.– Psidom
Nov 20 at 16:51
Are you saying you have a component / element where you have bound a
class attribute with Vue, and you want to know how to then get the value of that as a string?– thanksd
Nov 20 at 16:59
Are you saying you have a component / element where you have bound a
class attribute with Vue, and you want to know how to then get the value of that as a string?– thanksd
Nov 20 at 16:59
2
2
Can you bind the class to a function that returns a string, rather than to literals? That should give you the string anywhere you can access the function.
– Joe Z
Nov 20 at 17:25
Can you bind the class to a function that returns a string, rather than to literals? That should give you the string anywhere you can access the function.
– Joe Z
Nov 20 at 17:25
|
show 3 more comments
1 Answer
1
active
oldest
votes
You can bind the class to a function, rather than literals. For instance:
:class="getClasses"
where the function is computed:
computed: {
getClasses: function() {
return 'string-class test-case-class'
},
You can then use it just like any other computed function:
{{ getClasses }}
Should show the string literal 'string-class test-case-class'.
answered Nov 20 at 17:35
Joe Z
64321024
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
add a comment |
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
});
}
});
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%2f53397644%2fevaluate-a-class-binding-to-string%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can bind the class to a function, rather than literals. For instance:
:class="getClasses"
where the function is computed:
computed: {
getClasses: function() {
return 'string-class test-case-class'
},
You can then use it just like any other computed function:
{{ getClasses }}
Should show the string literal 'string-class test-case-class'.
answered Nov 20 at 17:35
Joe Z
64321024
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
add a comment |
You can bind the class to a function, rather than literals. For instance:
:class="getClasses"
where the function is computed:
computed: {
getClasses: function() {
return 'string-class test-case-class'
},
You can then use it just like any other computed function:
{{ getClasses }}
Should show the string literal 'string-class test-case-class'.
answered Nov 20 at 17:35
Joe Z
64321024
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
add a comment |
You can bind the class to a function, rather than literals. For instance:
:class="getClasses"
where the function is computed:
computed: {
getClasses: function() {
return 'string-class test-case-class'
},
You can then use it just like any other computed function:
{{ getClasses }}
Should show the string literal 'string-class test-case-class'.
answered Nov 20 at 17:35
Joe Z
64321024
You can bind the class to a function, rather than literals. For instance:
:class="getClasses"
where the function is computed:
computed: {
getClasses: function() {
return 'string-class test-case-class'
},
You can then use it just like any other computed function:
{{ getClasses }}
Should show the string literal 'string-class test-case-class'.
answered Nov 20 at 17:35
Joe Z
64321024
answered Nov 20 at 17:35
Joe Z
64321024
answered Nov 20 at 17:35
Joe Z
64321024
answered Nov 20 at 17:35
Joe Z
64321024
64321024
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
add a comment |
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
This won't compute this though: ['string-class', {'test-case-class': true}]
– panthro
Nov 20 at 17:36
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
You could have the classes as data items, and have two functions: one that returns the literal without the array and object decorations, and one that returns it with them. However, it seems likely that this would scale somewhat poorly if you have many classes with lots of decisions to make.
– Joe Z
Nov 20 at 17:48
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53397644%2fevaluate-a-class-binding-to-string%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
1
Can you clarify what you mean by evaluate to string form?
– Steven B.
Nov 20 at 16:45
I have edited the original question.
– panthro
Nov 20 at 16:47
1
You need to be more specific about how the component is used, and how it's constructed. It appears you are trying to reproduce
Vue's compiling process.– Psidom
Nov 20 at 16:51
Are you saying you have a component / element where you have bound a
classattribute with Vue, and you want to know how to then get the value of that as a string?– thanksd
Nov 20 at 16:59
2
Can you bind the class to a function that returns a string, rather than to literals? That should give you the string anywhere you can access the function.
– Joe Z
Nov 20 at 17:25