问在vuejs中的v-for中使用img src
EN

Stack Overflow用户

提问于 2018-10-22 17:08:58

回答 2查看 4.5K关注 0票数 0

我有一个基本的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>',

在image标签中，我尝试这样放入图像源

'<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'}
        ]
    }
},

javascript

vue.js

vuejs2

回答 2

Stack Overflow用户

发布于 2018-10-22 19:14:32

由于组件是以字符串形式编写的，并且已经用完了双引号和单引号，因此必须使用template strings/literals.

因此，要简单地解决图像源的一个问题，您必须执行以下操作：

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

票数 0

Stack Overflow用户

发布于 2018-10-22 20:05:08

这就是为什么Vue有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>'
})