How to get VueJS modifiers with PUG
How can we get modifiers with Pug?
I tried the following:
my-component(:options.sync="addresses")
my-component(':options.sync'="addresses")
Both of these give a syntax error, unexpected token.
my-component(:options="addresses")
Gets compiled but of course misses the modifier in the final HTML.
If that cannot be achieved with pug, is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
vue.js vuejs2 pug
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
|
show 1 more comment
How can we get modifiers with Pug?
I tried the following:
my-component(:options.sync="addresses")
my-component(':options.sync'="addresses")
Both of these give a syntax error, unexpected token.
my-component(:options="addresses")
Gets compiled but of course misses the modifier in the final HTML.
If that cannot be achieved with pug, is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
vue.js vuejs2 pug
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
What exactly do you want to be output? I'm using pug with vue.js and have never had a problem with this.
– Graham
Nov 27 '18 at 2:42
Take a look at this codepen, it rendersmy-component(:options="addresses")to<my-component :options="addresses"></my-component>, just as expected.
– Graham
Nov 27 '18 at 2:44
Also, the codepen rendersmy-component(:options.sync="addresses")as<my-component :options.sync="addresses"></my-component>
– Graham
Nov 27 '18 at 7:08
I have no idea why this is happening but it is. I will dig further then :(
– Vincent Mimoun-Prat
Nov 27 '18 at 9:30
I'm struggling to understand what "Gets compiled but of course misses the modifier in the final HTML." means exactly. That's a little vague, could you post more details around that?
– Graham
Nov 27 '18 at 14:23
|
show 1 more comment
How can we get modifiers with Pug?
I tried the following:
my-component(:options.sync="addresses")
my-component(':options.sync'="addresses")
Both of these give a syntax error, unexpected token.
my-component(:options="addresses")
Gets compiled but of course misses the modifier in the final HTML.
If that cannot be achieved with pug, is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
vue.js vuejs2 pug
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
How can we get modifiers with Pug?
I tried the following:
my-component(:options.sync="addresses")
my-component(':options.sync'="addresses")
Both of these give a syntax error, unexpected token.
my-component(:options="addresses")
Gets compiled but of course misses the modifier in the final HTML.
If that cannot be achieved with pug, is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
vue.js vuejs2 pug
vue.js vuejs2 pug
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
asked Nov 26 '18 at 22:45
Vincent Mimoun-PratVincent Mimoun-Prat
22.3k1061106
22.3k1061106
What exactly do you want to be output? I'm using pug with vue.js and have never had a problem with this.
– Graham
Nov 27 '18 at 2:42
Take a look at this codepen, it rendersmy-component(:options="addresses")to<my-component :options="addresses"></my-component>, just as expected.
– Graham
Nov 27 '18 at 2:44
Also, the codepen rendersmy-component(:options.sync="addresses")as<my-component :options.sync="addresses"></my-component>
– Graham
Nov 27 '18 at 7:08
I have no idea why this is happening but it is. I will dig further then :(
– Vincent Mimoun-Prat
Nov 27 '18 at 9:30
I'm struggling to understand what "Gets compiled but of course misses the modifier in the final HTML." means exactly. That's a little vague, could you post more details around that?
– Graham
Nov 27 '18 at 14:23
|
show 1 more comment
What exactly do you want to be output? I'm using pug with vue.js and have never had a problem with this.
– Graham
Nov 27 '18 at 2:42
Take a look at this codepen, it rendersmy-component(:options="addresses")to<my-component :options="addresses"></my-component>, just as expected.
– Graham
Nov 27 '18 at 2:44
Also, the codepen rendersmy-component(:options.sync="addresses")as<my-component :options.sync="addresses"></my-component>
– Graham
Nov 27 '18 at 7:08
I have no idea why this is happening but it is. I will dig further then :(
– Vincent Mimoun-Prat
Nov 27 '18 at 9:30
I'm struggling to understand what "Gets compiled but of course misses the modifier in the final HTML." means exactly. That's a little vague, could you post more details around that?
– Graham
Nov 27 '18 at 14:23
What exactly do you want to be output? I'm using pug with vue.js and have never had a problem with this.
– Graham
Nov 27 '18 at 2:42
What exactly do you want to be output? I'm using pug with vue.js and have never had a problem with this.
– Graham
Nov 27 '18 at 2:42
Take a look at this codepen, it renders
my-component(:options="addresses") to <my-component :options="addresses"></my-component>, just as expected.– Graham
Nov 27 '18 at 2:44
Take a look at this codepen, it renders
my-component(:options="addresses") to <my-component :options="addresses"></my-component>, just as expected.– Graham
Nov 27 '18 at 2:44
Also, the codepen renders
my-component(:options.sync="addresses") as <my-component :options.sync="addresses"></my-component>– Graham
Nov 27 '18 at 7:08
Also, the codepen renders
my-component(:options.sync="addresses") as <my-component :options.sync="addresses"></my-component>– Graham
Nov 27 '18 at 7:08
I have no idea why this is happening but it is. I will dig further then :(
– Vincent Mimoun-Prat
Nov 27 '18 at 9:30
I have no idea why this is happening but it is. I will dig further then :(
– Vincent Mimoun-Prat
Nov 27 '18 at 9:30
I'm struggling to understand what "Gets compiled but of course misses the modifier in the final HTML." means exactly. That's a little vague, could you post more details around that?
– Graham
Nov 27 '18 at 14:23
I'm struggling to understand what "Gets compiled but of course misses the modifier in the final HTML." means exactly. That's a little vague, could you post more details around that?
– Graham
Nov 27 '18 at 14:23
|
show 1 more comment
1 Answer
1
active
oldest
votes
To answer this part of your question you can output raw HTML with either the pipe or period characters at the end of your element.
...is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
With the pipe at the start of a line you will get the raw output for that line. For example this will render the exact string after the pipe:
| <div>
| <a href='https://example.com'>Link to site</a>
| </div>
The period is used after a block to output all child elements as raw text. This would output the same HTML as the code block above:
div.
<a href='https://example.com'>Link to site</a>
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
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%2f53490258%2fhow-to-get-vuejs-modifiers-with-pug%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
To answer this part of your question you can output raw HTML with either the pipe or period characters at the end of your element.
...is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
With the pipe at the start of a line you will get the raw output for that line. For example this will render the exact string after the pipe:
| <div>
| <a href='https://example.com'>Link to site</a>
| </div>
The period is used after a block to output all child elements as raw text. This would output the same HTML as the code block above:
div.
<a href='https://example.com'>Link to site</a>
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
add a comment |
To answer this part of your question you can output raw HTML with either the pipe or period characters at the end of your element.
...is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
With the pipe at the start of a line you will get the raw output for that line. For example this will render the exact string after the pipe:
| <div>
| <a href='https://example.com'>Link to site</a>
| </div>
The period is used after a block to output all child elements as raw text. This would output the same HTML as the code block above:
div.
<a href='https://example.com'>Link to site</a>
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
add a comment |
To answer this part of your question you can output raw HTML with either the pipe or period characters at the end of your element.
...is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
With the pipe at the start of a line you will get the raw output for that line. For example this will render the exact string after the pipe:
| <div>
| <a href='https://example.com'>Link to site</a>
| </div>
The period is used after a block to output all child elements as raw text. This would output the same HTML as the code block above:
div.
<a href='https://example.com'>Link to site</a>
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
To answer this part of your question you can output raw HTML with either the pipe or period characters at the end of your element.
...is there any way to integrate raw HTML within a PUG template so that I can specify just that component with HTML and the rest with PUG syntax?
With the pipe at the start of a line you will get the raw output for that line. For example this will render the exact string after the pipe:
| <div>
| <a href='https://example.com'>Link to site</a>
| </div>
The period is used after a block to output all child elements as raw text. This would output the same HTML as the code block above:
div.
<a href='https://example.com'>Link to site</a>
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
answered Nov 27 '18 at 7:12
GrahamGraham
3,652143659
3,652143659
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%2f53490258%2fhow-to-get-vuejs-modifiers-with-pug%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
What exactly do you want to be output? I'm using pug with vue.js and have never had a problem with this.
– Graham
Nov 27 '18 at 2:42
Take a look at this codepen, it renders
my-component(:options="addresses")to<my-component :options="addresses"></my-component>, just as expected.– Graham
Nov 27 '18 at 2:44
Also, the codepen renders
my-component(:options.sync="addresses")as<my-component :options.sync="addresses"></my-component>– Graham
Nov 27 '18 at 7:08
I have no idea why this is happening but it is. I will dig further then :(
– Vincent Mimoun-Prat
Nov 27 '18 at 9:30
I'm struggling to understand what "Gets compiled but of course misses the modifier in the final HTML." means exactly. That's a little vague, could you post more details around that?
– Graham
Nov 27 '18 at 14:23