मैं संपत्ति प्रबंधन के लिए वेबपैक के साथ वू और लारवेल मिक्स के साथ अपने प्रोजेक्ट में Vue 2.6.12 का उपयोग कर रहा हूं। और मैं VueJS के लिए अपेक्षाकृत नया हूँ।

अब मुझे डायनामिक VueJS प्रॉपर्टी वैल्यू को मौजूदा HTML/VueMaterial एलिमेंट एट्रीब्यूट में वैल्यू के रूप में पास करने की जरूरत है, जैसा कि नीचे दिया गया है:

 <md-icon md-src="{{iconPath}}{{iconName}}-icon-{{iconColor}}.svg">

मुझे पता है कि VueJS के साथ हम प्रॉप्स से डायनेमिक एट्रिब्यूट बना सकते हैं, लेकिन मैं एट्रिब्यूट का नाम नहीं बदलना पसंद करता हूं और फिर भी प्रोप वैल्यू पास करता हूं जैसे कि जब ऊपर जैसा कुछ संकलित हो जाता है तो यह बन जाता है:

  <md-icon md-src="/assets/icons/document-tab-icon-green.svg">

पूर्ण Vue आइकन घटक MyIcon.vue नीचे है:

  <template>
        <div>
            <md-icon md-src="{{iconPath}}{{iconName}}-icon-{{iconColor}}.svg">
        </div>
    </template>



 <script>
    export default {
        name: 'MyIcon',
        props: {
            iconPath: {type: String, default: '/assets/icons/'}
            iconColor: {type: String, default: 'green'},
            iconName: {type: String, default: 'document-tab'}
        }
    }
    </script>

मेरे पास {projectroot}/public/assets/icons निर्देशिका पथ में मौजूद svgs है।

मैंने जो उल्लेख किया है उसे मैं कैसे प्राप्त कर सकता हूं?

0
Vicky Dev 8 अक्टूबर 2020, 19:32

1 उत्तर

सबसे बढ़िया उत्तर

आप md-src को एक परिकलित संपत्ति से बाँधने का प्रयास कर सकते हैं जो नीचे दिए गए svg का पूरा पथ लौटाती है:

...
<md-icon :md-src="svgPath">
...
computed:{
   svgPath(){
    return  `${this.iconPath}${this.iconName}-icon-${this.iconColor}.svg`
  }
}
...
1
Eldar 8 अक्टूबर 2020, 19:36