I would like to display an svg icon generated from a computed property. When I use the VueJS chrome extension, I can see that the prop is being populated correctly with the link to the svg icon. However, the HTML code still does not render the icon on the page. What am I missing in the syntax?
Here is my HTML(in Vue.JS):
var markUp = Vue.compile('\
<a class="box" ref="addingBox" href="#" role="button" :id="\'Add_\' + type" @click.prevent="clickBox" v-preventTabbing:[preventTabbingValue]>\
<div class="ab-Grid">\
<div class="ab-Grid-row">\
<div class="ab-Grid-col" :class="{ \'ab-sm2\': this.type != \'showMoreOptions\' }">\
<div v-if="type != \'hasMatchingKeys\'" class="box-icon" aria-hidden="true" :class="icon"></div>\
<img v-else :src="require(keysIcon)" role="presentation" class="box-icon-img"/>\
</div>\
<div class="ab-Grid-col ab-sm10">\
<div class="box-title">{{ title }}</div>\
<div class="box-description" :class="{ \'text-align-center\': this.type == \'showMoreOptions\' }">{{ desc }}</div>\
</div>\
</div>\
</div>\
</a>');
Here is my implementation of the computed property:
computed: {
hasMatchingKeys() {
return ["a", "b"].includes(this.type)
},
keysIcon() {
return new Map([['a', this.aIcon], ['b', this.bIcon]]).get(this.type) || ""
}
}
Try replacing :src="require(keysIcon)" with :src="keysIcon".
Working example:
const res = Vue.compile('<div>\
<input type="radio" id="one" value="a" v-model="type"> Blue<br>\
<input type="radio" id="two" value="b" v-model="type"> Green<br>\
<img :src="keysIcon" /></div>');
const demo = new Vue({
el: "#demo",
data: {
type: "a",
aIcon: "https://i.stack.imgur.com/gJmeJ.png",
bIcon: "https://i.stack.imgur.com/T5uTa.png",
},
render: res.render,
staticRenderFns: res.staticRenderFns,
computed: {
keysIcon() {
return (
new Map([
["a", this.aIcon],
["b", this.bIcon],
]).get(this.type) || ""
);
},
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"></div>