используя img src внутри v-for в vuejs

Question

У меня есть базовый компонент vue.js, например так:

template:'<nav id="custom-erp-menu-nav">'+
            '<ul id="custom-erp-menu-lists">'+
                '<li class="custom-erp-menu-list" v-on:click="toggleOpenChild" v-for="module in modules">'+
                    '<a href="#">'+
                        '<span>'+
                            //'<img v-bind:src="assets/images/module-icons/module.icon.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+    
                            '<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>',

В теге изображения я пытаюсь поместить источник изображения примерно так:

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

, который не работает,Я пробовал и другие ответы, такие как этот,

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

, и это мои данные

data : function(){
    return {
        modules : [
            { name : 'Foo', icon : 'dollar-bills'},
            { name : 'Bar', icon : 'dollar-trucks'},
            { name : 'FOOBAR', icon : 'env-env'}
        ]
    }
},

Answer 1

Вот почему Vue имеет Вычисляемые свойства

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>'
})

Answer 2

Поскольку вы пишете свои компоненты в виде строки и вы уже использовали двойные и одинарные кавычки, вам придется использовать шаблон строки / литералы.

Так что просто исправьтеОдна проблема с источником изображения, вы должны будете сделать следующее:

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

Каждая переменная или скрипт, который вы хотите выполнить, должны быть внутри усов со знаком доллара.

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>