Vue.js dynamically rendering svg
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm trying to render a svg file containing Vue.js template syntax at specific places. The file gets rendered correctly.
Upon instantiation of the inner element (the svg), the template syntax gets replaced, but a vue warning is emitted:
vue.js:597 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
In the SVG there is a text containing the template syntax {{data}}
Vue.component('svg-show', {
props: {
model: {
required: true
},
compiled:null
},
render: function (h) {
return h("div",
[
h(this.compiled, {
props: {
data: this.model
}
})
]);
},
created() {
},
mounted() {
console.log("mounted");
console.log(this.model.SVG);
this.compiled = Vue.compile("<div>" + model.SVG + "</div>");
}
});
https://jsfiddle.net/dg2hkeby/10/
i also tried to use a static variable for the data property, but this did not succeed either.
How would one achieve what i'm trying to do using Vue.js?
javascript svg vue.js vuejs2 vue-component
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
|
show 2 more comments
0
I'm trying to render a svg file containing Vue.js template syntax at specific places. The file gets rendered correctly.
Upon instantiation of the inner element (the svg), the template syntax gets replaced, but a vue warning is emitted:
vue.js:597 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
In the SVG there is a text containing the template syntax {{data}}
Vue.component('svg-show', {
props: {
model: {
required: true
},
compiled:null
},
render: function (h) {
return h("div",
[
h(this.compiled, {
props: {
data: this.model
}
})
]);
},
created() {
},
mounted() {
console.log("mounted");
console.log(this.model.SVG);
this.compiled = Vue.compile("<div>" + model.SVG + "</div>");
}
});
https://jsfiddle.net/dg2hkeby/10/
i also tried to use a static variable for the data property, but this did not succeed either.
How would one achieve what i'm trying to do using Vue.js?
javascript svg vue.js vuejs2 vue-component
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
1
Please provide a mcve, e.g. a JSFiddle
– Sphinxxx
Nov 23 '18 at 23:45
added a jsfiddle
– Volker Mauel
Nov 24 '18 at 10:39
No offense but your code is super messy and incorrect in several places... Like... Why are you usingwindow.modal? Why aren't you passingwindow.modalto the data? You're passing a non-existingmodalvariable to themodalvalue in thedata, your Inkscape SVG should've been saved as Plain SVG not as Inkscape SVG...
– Simon Hyll
Nov 25 '18 at 15:09
Also you don't seem to be ever using themodal.SVGvariable that you're assigning as your SVG, so how do you expect it to magically appear in the output?
– Simon Hyll
Nov 25 '18 at 15:10
the model is assigned dynamically. so is the model.SVG. since i can't provide dynamic loads of local files, i pasted the code of the svg in the model and assigned it there.
– Volker Mauel
Nov 25 '18 at 19:21
|
show 2 more comments
0
0
0
I'm trying to render a svg file containing Vue.js template syntax at specific places. The file gets rendered correctly.
Upon instantiation of the inner element (the svg), the template syntax gets replaced, but a vue warning is emitted:
vue.js:597 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
In the SVG there is a text containing the template syntax {{data}}
Vue.component('svg-show', {
props: {
model: {
required: true
},
compiled:null
},
render: function (h) {
return h("div",
[
h(this.compiled, {
props: {
data: this.model
}
})
]);
},
created() {
},
mounted() {
console.log("mounted");
console.log(this.model.SVG);
this.compiled = Vue.compile("<div>" + model.SVG + "</div>");
}
});
https://jsfiddle.net/dg2hkeby/10/
i also tried to use a static variable for the data property, but this did not succeed either.
How would one achieve what i'm trying to do using Vue.js?
javascript svg vue.js vuejs2 vue-component
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
I'm trying to render a svg file containing Vue.js template syntax at specific places. The file gets rendered correctly.
Upon instantiation of the inner element (the svg), the template syntax gets replaced, but a vue warning is emitted:
vue.js:597 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
In the SVG there is a text containing the template syntax {{data}}
Vue.component('svg-show', {
props: {
model: {
required: true
},
compiled:null
},
render: function (h) {
return h("div",
[
h(this.compiled, {
props: {
data: this.model
}
})
]);
},
created() {
},
mounted() {
console.log("mounted");
console.log(this.model.SVG);
this.compiled = Vue.compile("<div>" + model.SVG + "</div>");
}
});
https://jsfiddle.net/dg2hkeby/10/
i also tried to use a static variable for the data property, but this did not succeed either.
How would one achieve what i'm trying to do using Vue.js?
javascript svg vue.js vuejs2 vue-component
javascript svg vue.js vuejs2 vue-component
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
edited Nov 24 '18 at 10:39
Volker Mauel
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
asked Nov 23 '18 at 14:39
Volker MauelVolker Mauel
431317
431317
1
Please provide a mcve, e.g. a JSFiddle
– Sphinxxx
Nov 23 '18 at 23:45
added a jsfiddle
– Volker Mauel
Nov 24 '18 at 10:39
No offense but your code is super messy and incorrect in several places... Like... Why are you usingwindow.modal? Why aren't you passingwindow.modalto the data? You're passing a non-existingmodalvariable to themodalvalue in thedata, your Inkscape SVG should've been saved as Plain SVG not as Inkscape SVG...
– Simon Hyll
Nov 25 '18 at 15:09
Also you don't seem to be ever using themodal.SVGvariable that you're assigning as your SVG, so how do you expect it to magically appear in the output?
– Simon Hyll
Nov 25 '18 at 15:10
the model is assigned dynamically. so is the model.SVG. since i can't provide dynamic loads of local files, i pasted the code of the svg in the model and assigned it there.
– Volker Mauel
Nov 25 '18 at 19:21
|
show 2 more comments
1
Please provide a mcve, e.g. a JSFiddle
– Sphinxxx
Nov 23 '18 at 23:45
added a jsfiddle
– Volker Mauel
Nov 24 '18 at 10:39
No offense but your code is super messy and incorrect in several places... Like... Why are you usingwindow.modal? Why aren't you passingwindow.modalto the data? You're passing a non-existingmodalvariable to themodalvalue in thedata, your Inkscape SVG should've been saved as Plain SVG not as Inkscape SVG...
– Simon Hyll
Nov 25 '18 at 15:09
Also you don't seem to be ever using themodal.SVGvariable that you're assigning as your SVG, so how do you expect it to magically appear in the output?
– Simon Hyll
Nov 25 '18 at 15:10
the model is assigned dynamically. so is the model.SVG. since i can't provide dynamic loads of local files, i pasted the code of the svg in the model and assigned it there.
– Volker Mauel
Nov 25 '18 at 19:21
1
1
Please provide a mcve, e.g. a JSFiddle
– Sphinxxx
Nov 23 '18 at 23:45
Please provide a mcve, e.g. a JSFiddle
– Sphinxxx
Nov 23 '18 at 23:45
added a jsfiddle
– Volker Mauel
Nov 24 '18 at 10:39
added a jsfiddle
– Volker Mauel
Nov 24 '18 at 10:39
No offense but your code is super messy and incorrect in several places... Like... Why are you using
window.modal? Why aren't you passing window.modal to the data? You're passing a non-existing modal variable to the modal value in the data, your Inkscape SVG should've been saved as Plain SVG not as Inkscape SVG...– Simon Hyll
Nov 25 '18 at 15:09
No offense but your code is super messy and incorrect in several places... Like... Why are you using
window.modal? Why aren't you passing window.modal to the data? You're passing a non-existing modal variable to the modal value in the data, your Inkscape SVG should've been saved as Plain SVG not as Inkscape SVG...– Simon Hyll
Nov 25 '18 at 15:09
Also you don't seem to be ever using the
modal.SVG variable that you're assigning as your SVG, so how do you expect it to magically appear in the output?– Simon Hyll
Nov 25 '18 at 15:10
Also you don't seem to be ever using the
modal.SVG variable that you're assigning as your SVG, so how do you expect it to magically appear in the output?– Simon Hyll
Nov 25 '18 at 15:10
the model is assigned dynamically. so is the model.SVG. since i can't provide dynamic loads of local files, i pasted the code of the svg in the model and assigned it there.
– Volker Mauel
Nov 25 '18 at 19:21
the model is assigned dynamically. so is the model.SVG. since i can't provide dynamic loads of local files, i pasted the code of the svg in the model and assigned it there.
– Volker Mauel
Nov 25 '18 at 19:21
|
show 2 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%2f53448692%2fvue-js-dynamically-rendering-svg%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%2f53448692%2fvue-js-dynamically-rendering-svg%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
Please provide a mcve, e.g. a JSFiddle
– Sphinxxx
Nov 23 '18 at 23:45
added a jsfiddle
– Volker Mauel
Nov 24 '18 at 10:39
No offense but your code is super messy and incorrect in several places... Like... Why are you using
window.modal? Why aren't you passingwindow.modalto the data? You're passing a non-existingmodalvariable to themodalvalue in thedata, your Inkscape SVG should've been saved as Plain SVG not as Inkscape SVG...– Simon Hyll
Nov 25 '18 at 15:09
Also you don't seem to be ever using the
modal.SVGvariable that you're assigning as your SVG, so how do you expect it to magically appear in the output?– Simon Hyll
Nov 25 '18 at 15:10
the model is assigned dynamically. so is the model.SVG. since i can't provide dynamic loads of local files, i pasted the code of the svg in the model and assigned it there.
– Volker Mauel
Nov 25 '18 at 19:21