Question

我想通过webpack要求滑块中的每个图像路径。此刻我有一个看起来像这样的对象：

 data() {
         return {
            slides: [
                {
                    title: 'The Ultimate Shopping Experinece',
                    description: 'Szczęście piąte ipsum dolor sit amet, consectetur adipisicing elit. Atque, tempore.',
                    image:  require('~/assets/img/slides/slide1.png'),
                    button: 'Purchase Now'
                },
                {
                    title: 'The Ultimate ',
                    description: 'Szczęście piąte ipsum dolor sit amet',
                    image: require('~/assets/img/slides/slide2.png'),
                }
            ]
        }
    }

我通过v-for在vue模板中循环了该对象。我的问题是如何在每个幻灯片图像内部都不需要该对象的情况下映射该对象？我想要一个清晰的物体，像这样：

 data() {
     return {
        slides: [
            {
                title: 'The Ultimate Shopping Experinece',
                description: 'Szczęście piąte ipsum dolor sit amet, consectetur adipisicing elit. Atque, tempore.',
                image:  '~/assets/img/slides/slide1.png',
                button: 'Purchase Now'
            },
            {
                title: 'The Ultimate ',
                description: 'Szczęście piąte ipsum dolor sit amet',
                image: '~/assets/img/slides/slide2.png',
            }
        ]
    }
},
created() {
//here some map or other way?
}

Answer 1

UPD2：我认为这可能会有所帮助：

<template>
<div v-for='slide in parsedSlides'>
  <img :src='slide.image'>
</div>
</template>
<script>
export default {
  data() {
    return {
      slides: [{
          title: 'The Ultimate Shopping Experinece',
          description: 'Szczęście piąte ipsum dolor sit amet, consectetur adipisicing elit. Atque, tempore.',
          image: 'img/slides/slide1.png',
          button: 'Purchase Now'
        },
        {
          title: 'The Ultimate ',
          description: 'Szczęście piąte ipsum dolor sit amet',
          image: 'img/slides/slide2.png',
        }
      ]
    }
  },
  coptuted: {
    parsedSlides: function() {
      return this.slides.filter(slide => slide.image = require('~/assets/'+slide.image)); 
    }
  }
}
</script>

Vue nuxt需要对象中的每个url

1 个答案: