VueJS interpolation does not render when Jekyll involved
For some reason, string interpolation in VueJS is not working as I expect.
This is my HTML:
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
{{ row.name }}
</li>
</ul>
... and my javascript file...
state.elements.bookList = new Vue({
el: '#books',
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
When this renders, I get the expected two items in the list; however the interpolation does not work. As a test, I added the v-html binding, and it does render the expected name.
What am I doing wrong that the name does not render?
javascript vuejs2 jekyll
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
add a comment |
For some reason, string interpolation in VueJS is not working as I expect.
This is my HTML:
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
{{ row.name }}
</li>
</ul>
... and my javascript file...
state.elements.bookList = new Vue({
el: '#books',
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
When this renders, I get the expected two items in the list; however the interpolation does not work. As a test, I added the v-html binding, and it does render the expected name.
What am I doing wrong that the name does not render?
javascript vuejs2 jekyll
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
1
I cannot reproduce this. Have you perhaps changed thedelimeters?
– Phil
Nov 21 '18 at 1:07
1
@Phil That's it. I'm running it through Jekyll which uses handle bars (because everyone does). Jekyll is attempting to resolve the interpolation, and leaving nothing behind for Vue to pick up on. Changing the delimiters actually fixes it.
– Jefferey Cave
Nov 21 '18 at 1:21
I'm actually feeling very Rubber Duckish about having asked this.
– Jefferey Cave
Nov 21 '18 at 1:24
@JeffereyCave I've tagged this with jekyll so others can find it. Feel free to add your own answer
– Phil
Nov 21 '18 at 1:25
add a comment |
For some reason, string interpolation in VueJS is not working as I expect.
This is my HTML:
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
{{ row.name }}
</li>
</ul>
... and my javascript file...
state.elements.bookList = new Vue({
el: '#books',
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
When this renders, I get the expected two items in the list; however the interpolation does not work. As a test, I added the v-html binding, and it does render the expected name.
What am I doing wrong that the name does not render?
javascript vuejs2 jekyll
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
For some reason, string interpolation in VueJS is not working as I expect.
This is my HTML:
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
{{ row.name }}
</li>
</ul>
... and my javascript file...
state.elements.bookList = new Vue({
el: '#books',
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
When this renders, I get the expected two items in the list; however the interpolation does not work. As a test, I added the v-html binding, and it does render the expected name.
What am I doing wrong that the name does not render?
javascript vuejs2 jekyll
javascript vuejs2 jekyll
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
edited Nov 21 '18 at 11:46
Jefferey Cave
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
asked Nov 21 '18 at 0:59
Jefferey CaveJefferey Cave
1,2481729
1,2481729
1
I cannot reproduce this. Have you perhaps changed thedelimeters?
– Phil
Nov 21 '18 at 1:07
1
@Phil That's it. I'm running it through Jekyll which uses handle bars (because everyone does). Jekyll is attempting to resolve the interpolation, and leaving nothing behind for Vue to pick up on. Changing the delimiters actually fixes it.
– Jefferey Cave
Nov 21 '18 at 1:21
I'm actually feeling very Rubber Duckish about having asked this.
– Jefferey Cave
Nov 21 '18 at 1:24
@JeffereyCave I've tagged this with jekyll so others can find it. Feel free to add your own answer
– Phil
Nov 21 '18 at 1:25
add a comment |
1
I cannot reproduce this. Have you perhaps changed thedelimeters?
– Phil
Nov 21 '18 at 1:07
1
@Phil That's it. I'm running it through Jekyll which uses handle bars (because everyone does). Jekyll is attempting to resolve the interpolation, and leaving nothing behind for Vue to pick up on. Changing the delimiters actually fixes it.
– Jefferey Cave
Nov 21 '18 at 1:21
I'm actually feeling very Rubber Duckish about having asked this.
– Jefferey Cave
Nov 21 '18 at 1:24
@JeffereyCave I've tagged this with jekyll so others can find it. Feel free to add your own answer
– Phil
Nov 21 '18 at 1:25
1
1
I cannot reproduce this. Have you perhaps changed the
delimeters?– Phil
Nov 21 '18 at 1:07
I cannot reproduce this. Have you perhaps changed the
delimeters?– Phil
Nov 21 '18 at 1:07
1
1
@Phil That's it. I'm running it through Jekyll which uses handle bars (because everyone does). Jekyll is attempting to resolve the interpolation, and leaving nothing behind for Vue to pick up on. Changing the delimiters actually fixes it.
– Jefferey Cave
Nov 21 '18 at 1:21
@Phil That's it. I'm running it through Jekyll which uses handle bars (because everyone does). Jekyll is attempting to resolve the interpolation, and leaving nothing behind for Vue to pick up on. Changing the delimiters actually fixes it.
– Jefferey Cave
Nov 21 '18 at 1:21
I'm actually feeling very Rubber Duckish about having asked this.
– Jefferey Cave
Nov 21 '18 at 1:24
I'm actually feeling very Rubber Duckish about having asked this.
– Jefferey Cave
Nov 21 '18 at 1:24
@JeffereyCave I've tagged this with jekyll so others can find it. Feel free to add your own answer
– Phil
Nov 21 '18 at 1:25
@JeffereyCave I've tagged this with jekyll so others can find it. Feel free to add your own answer
– Phil
Nov 21 '18 at 1:25
add a comment |
2 Answers
2
active
oldest
votes
Curly brackets conflict.
If you want jekyll to leave your Vue's brackets alone, you can use the raw tag :
{% raw %}{{ row.name }}{% endraw %}
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
add a comment |
This is an issue of conflicting templating engines: jekyll and vuejs. In both cases, data tags are identified with curly brackets.
In this case, jekyll was resolving the tag to an empty string, later vue coes along and does not find anything.
Other engines that could (easily) conflict:
- Jekyll
- VueJS
- Mustache
- Handlebar
To solve this, one of the template engines will need to have its delimiters changed:
state.elements.bookList = new Vue({
el: '#books',
delimiters: ['[[', ']]'],
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
[[ row.name ]]
</li>
</ul>
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
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%2f53403854%2fvuejs-interpolation-does-not-render-when-jekyll-involved%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
Curly brackets conflict.
If you want jekyll to leave your Vue's brackets alone, you can use the raw tag :
{% raw %}{{ row.name }}{% endraw %}
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
add a comment |
Curly brackets conflict.
If you want jekyll to leave your Vue's brackets alone, you can use the raw tag :
{% raw %}{{ row.name }}{% endraw %}
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
add a comment |
Curly brackets conflict.
If you want jekyll to leave your Vue's brackets alone, you can use the raw tag :
{% raw %}{{ row.name }}{% endraw %}
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
Curly brackets conflict.
If you want jekyll to leave your Vue's brackets alone, you can use the raw tag :
{% raw %}{{ row.name }}{% endraw %}
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
answered Nov 21 '18 at 7:33
David JacquelDavid Jacquel
38.1k377108
38.1k377108
add a comment |
add a comment |
This is an issue of conflicting templating engines: jekyll and vuejs. In both cases, data tags are identified with curly brackets.
In this case, jekyll was resolving the tag to an empty string, later vue coes along and does not find anything.
Other engines that could (easily) conflict:
- Jekyll
- VueJS
- Mustache
- Handlebar
To solve this, one of the template engines will need to have its delimiters changed:
state.elements.bookList = new Vue({
el: '#books',
delimiters: ['[[', ']]'],
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
[[ row.name ]]
</li>
</ul>
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
add a comment |
This is an issue of conflicting templating engines: jekyll and vuejs. In both cases, data tags are identified with curly brackets.
In this case, jekyll was resolving the tag to an empty string, later vue coes along and does not find anything.
Other engines that could (easily) conflict:
- Jekyll
- VueJS
- Mustache
- Handlebar
To solve this, one of the template engines will need to have its delimiters changed:
state.elements.bookList = new Vue({
el: '#books',
delimiters: ['[[', ']]'],
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
[[ row.name ]]
</li>
</ul>
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
add a comment |
This is an issue of conflicting templating engines: jekyll and vuejs. In both cases, data tags are identified with curly brackets.
In this case, jekyll was resolving the tag to an empty string, later vue coes along and does not find anything.
Other engines that could (easily) conflict:
- Jekyll
- VueJS
- Mustache
- Handlebar
To solve this, one of the template engines will need to have its delimiters changed:
state.elements.bookList = new Vue({
el: '#books',
delimiters: ['[[', ']]'],
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
[[ row.name ]]
</li>
</ul>
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
This is an issue of conflicting templating engines: jekyll and vuejs. In both cases, data tags are identified with curly brackets.
In this case, jekyll was resolving the tag to an empty string, later vue coes along and does not find anything.
Other engines that could (easily) conflict:
- Jekyll
- VueJS
- Mustache
- Handlebar
To solve this, one of the template engines will need to have its delimiters changed:
state.elements.bookList = new Vue({
el: '#books',
delimiters: ['[[', ']]'],
data:{
db:state.db,
results:{
offset:0,
total_rows:0,
rows:[
{name:'bob'},
{name:'joe'},
]
}
}
});
<ul id='books'>
<li v-for="row in results.rows">
<span v-html="row.name"></span> --
[[ row.name ]]
</li>
</ul>
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
edited Nov 21 '18 at 11:44
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
answered Nov 21 '18 at 1:40
Jefferey CaveJefferey Cave
1,2481729
1,2481729
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%2f53403854%2fvuejs-interpolation-does-not-render-when-jekyll-involved%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
I cannot reproduce this. Have you perhaps changed the
delimeters?– Phil
Nov 21 '18 at 1:07
1
@Phil That's it. I'm running it through Jekyll which uses handle bars (because everyone does). Jekyll is attempting to resolve the interpolation, and leaving nothing behind for Vue to pick up on. Changing the delimiters actually fixes it.
– Jefferey Cave
Nov 21 '18 at 1:21
I'm actually feeling very Rubber Duckish about having asked this.
– Jefferey Cave
Nov 21 '18 at 1:24
@JeffereyCave I've tagged this with jekyll so others can find it. Feel free to add your own answer
– Phil
Nov 21 '18 at 1:25