[Vuejs]-Using img src inside v-for in vuejs

by

0👍

Since you are writing your components as a string and you have already used up double and single quotes, you will have to use template strings/literals.

So to simply fix your one issue with the image source, you would have to do the following:

 '<img :src="`assets/images/module-icons/${module.icon}.svg`" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'

Every variable or script you would like to execute would have to be inside the dollar sign mustaches.

Vue.component('my-component', {
  data: function() {
    return {
       modules : [
        { name : 'Foo', icon : 'dollar-bills'},
        { name : 'Bar', icon : 'dollar-trucks'},
        { name : 'FOOBAR', icon : 'env-env'}
       ],
      count: 0
    }
  },
  template:'<nav id="custom-erp-menu-nav">'+
            '<ul id="custom-erp-menu-lists">'+
                '<li class="custom-erp-menu-list" v-on:click="" v-for="module in modules">'+
                    '<a href="#">'+
                        '<span>'+    
                            '<img :src="`assets/images/module-icons/${module.icon}.svg`" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
                        '</span>'+
                        '<span class="custom-erp-menu-parent">{{ module.name }}</span>'+
                    '</a>'+
                    '<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">'+
                        '<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>'+
                        '<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>'+
                        '<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>'+
                    '</ul>'+
                '</li>'+
            '</ul>'+
        '</nav>'
})

new Vue({
  el: '#app'
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div id="app">
  <my-component/>
</div>

0👍

This is why Vue has Computed properties

Vue.component('my-component', {
  data: function() {
    return {
       modules : [
        { name : 'Foo', icon : 'dollar-bills'},
        { name : 'Bar', icon : 'dollar-trucks'},
        { name : 'FOOBAR', icon : 'env-env'}
       ],
      count: 0
    }
  },
  computed: {
     assetsPath: function(file) {
        return 'assets/images/module-icons/' + file +'.svg';
     }
  },
  template:'<nav id="custom-erp-menu-nav">'+
            '<ul id="custom-erp-menu-lists">'+
                '<li class="custom-erp-menu-list" v-on:click="" v-for="module in modules">'+
                    '<a href="#">'+
                        '<span>'+    
                            '<img :src=assetsPath(module.icon) class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
                        '</span>'+
                        '<span class="custom-erp-menu-parent">{{ module.name }}</span>'+
                    '</a>'+
                    '<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">'+
                        '<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>'+
                        '<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>'+
                        '<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>'+
                    '</ul>'+
                '</li>'+
            '</ul>'+
        '</nav>'
})

Leave a comment