【问题标题】:Vue nuxt require each url in objectVue nuxt 需要对象中的每个 url
【发布时间】:2019-01-29 13:05:00
【问题描述】:

我想通过 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?
}

【问题讨论】:

    标签: vue.js webpack nuxt.js


    【解决方案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>
    

    【讨论】:

    • 我不确定这很重要,但这个标签在 标签内,因为我使用的是 vue2-siema 组件(siema.js),这需要在 nuxt 中进行这样的解释.js。 github.com/sainf/nuxt-siema-demo
    • 此路径在模板中为compiled by nuxt。但我想在 vue 对象的某个地方执行此操作。
    • 我认为问题出在 标签中,我认为在方法中解析图像 src 会有所帮助,请参阅更新后的答案。
    • 这也不起作用。此代码:&lt;img :src="parseSrc('~/assets/img/slides/slide1.png')"&gt; &lt;no-ssr&gt;...&lt;/no-ssr&gt; make warning "Critical dependency: the request of a dependency is an expression"
    • 你能试试根据我更新的答案计算出的函数吗?
    猜你喜欢
    • 2021-07-12
    • 2021-05-14
    • 2020-01-02
    • 2019-01-09
    • 2021-11-26
    • 2016-08-03
    • 2021-09-07
    • 2022-10-24
    • 2012-10-12
    相关资源
    最近更新 更多