Me gustaría mostrar un ícono svg generado a partir de una propiedad calculada. Cuando uso la extensión de cromo de VueJS, puedo ver que el accesorio se completa correctamente con el enlace al ícono svg. Sin embargo, el código HTML todavía no representa el icono en la página. ¿Qué me estoy perdiendo en la sintaxis?
Aquí está mi HTML (en 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>');Aquí está mi implementación de la propiedad calculada:
computed: { hasMatchingKeys() { return ["a", "b"].includes(this.type) }, keysIcon() { return new Map([['a', this.aIcon], ['b', this.bIcon]]).get(this.type) || "" } }Intente reemplazar :src="require(keysIcon)" con :src="keysIcon" .
Ejemplo de trabajo:
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>