Vue.js concatenate string in v-text
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am trying to concatenate string inside v-text directive. Simple example:
<ul>
<li v-for="obj in frameworks"> {{ obj.name }} has {{ obj.vite }} users
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
This works fine. Now, instead of using the text interpolation if i use v-text like below, i still get the text showing up, but the Delete buttons disappear, regardless of the value of the mode property. These buttons should be visible if user clicks the edit button.
<ul>
<li v-for="obj in frameworks" v-text="`${obj.name} has ${obj.votes} users`">
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
Here is the fiddle:
https://jsfiddle.net/30a6edvs/
Can anyone please explain why.
vue.js vue.js-directives
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
add a comment |
I am trying to concatenate string inside v-text directive. Simple example:
<ul>
<li v-for="obj in frameworks"> {{ obj.name }} has {{ obj.vite }} users
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
This works fine. Now, instead of using the text interpolation if i use v-text like below, i still get the text showing up, but the Delete buttons disappear, regardless of the value of the mode property. These buttons should be visible if user clicks the edit button.
<ul>
<li v-for="obj in frameworks" v-text="`${obj.name} has ${obj.votes} users`">
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
Here is the fiddle:
https://jsfiddle.net/30a6edvs/
Can anyone please explain why.
vue.js vue.js-directives
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
add a comment |
I am trying to concatenate string inside v-text directive. Simple example:
<ul>
<li v-for="obj in frameworks"> {{ obj.name }} has {{ obj.vite }} users
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
This works fine. Now, instead of using the text interpolation if i use v-text like below, i still get the text showing up, but the Delete buttons disappear, regardless of the value of the mode property. These buttons should be visible if user clicks the edit button.
<ul>
<li v-for="obj in frameworks" v-text="`${obj.name} has ${obj.votes} users`">
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
Here is the fiddle:
https://jsfiddle.net/30a6edvs/
Can anyone please explain why.
vue.js vue.js-directives
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
I am trying to concatenate string inside v-text directive. Simple example:
<ul>
<li v-for="obj in frameworks"> {{ obj.name }} has {{ obj.vite }} users
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
This works fine. Now, instead of using the text interpolation if i use v-text like below, i still get the text showing up, but the Delete buttons disappear, regardless of the value of the mode property. These buttons should be visible if user clicks the edit button.
<ul>
<li v-for="obj in frameworks" v-text="`${obj.name} has ${obj.votes} users`">
<button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
</li>
</ul>
Here is the fiddle:
https://jsfiddle.net/30a6edvs/
Can anyone please explain why.
vue.js vue.js-directives
vue.js vue.js-directives
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
edited Nov 22 '18 at 6:10
Dawid Zbiński
1,58132542
1,58132542
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
asked Nov 22 '18 at 5:54
Yeasir Arafat MajumderYeasir Arafat Majumder
325214
325214
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Using v-text will replace inner text/html of the element and thus you cannot see the delete button inside that. So you have to do as your first example code.
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
1
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
add a comment |
Its actually changing the elements and setting the text.
So if you want the text and also button then your first method (Mustache interpolations) is the way
If you need to update the part of
textContent, you should use {{ Mustache }} interpolations.
Details
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
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%2f53424671%2fvue-js-concatenate-string-in-v-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Using v-text will replace inner text/html of the element and thus you cannot see the delete button inside that. So you have to do as your first example code.
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
1
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
add a comment |
Using v-text will replace inner text/html of the element and thus you cannot see the delete button inside that. So you have to do as your first example code.
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
1
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
add a comment |
Using v-text will replace inner text/html of the element and thus you cannot see the delete button inside that. So you have to do as your first example code.
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
Using v-text will replace inner text/html of the element and thus you cannot see the delete button inside that. So you have to do as your first example code.
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
edited Nov 22 '18 at 6:07
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
answered Nov 22 '18 at 6:01
Bhojendra RauniyarBhojendra Rauniyar
53.1k2083135
53.1k2083135
1
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
add a comment |
1
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
1
1
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
This makes sense! v-text actually replaces everything that is there between the opening and closing tags of the element on which it is being used. So in my case, it is removing the buttons as well..Thanks.
– Yeasir Arafat Majumder
Nov 22 '18 at 6:15
add a comment |
Its actually changing the elements and setting the text.
So if you want the text and also button then your first method (Mustache interpolations) is the way
If you need to update the part of
textContent, you should use {{ Mustache }} interpolations.
Details
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
add a comment |
Its actually changing the elements and setting the text.
So if you want the text and also button then your first method (Mustache interpolations) is the way
If you need to update the part of
textContent, you should use {{ Mustache }} interpolations.
Details
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
add a comment |
Its actually changing the elements and setting the text.
So if you want the text and also button then your first method (Mustache interpolations) is the way
If you need to update the part of
textContent, you should use {{ Mustache }} interpolations.
Details
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
Its actually changing the elements and setting the text.
So if you want the text and also button then your first method (Mustache interpolations) is the way
If you need to update the part of
textContent, you should use {{ Mustache }} interpolations.
Details
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
answered Nov 22 '18 at 6:11
Emtiaz ZahidEmtiaz Zahid
1,068618
1,068618
add a comment |
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.
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%2f53424671%2fvue-js-concatenate-string-in-v-text%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
