Question

我想使用this vue flipbook组件，它需要用于道具“页面”的图像URL数组。我的帖子回复来自wordpress rest API。

我需要从响应数组中获取“ image”属性，并将其转换为另一个图像URL数组。通常，我会在模板中像v-for=post in posts那样使用计算的posts（），并在循环中像post.image_full那样显示图像。

动画书组件：

<Flipbook
   class="flipbook"
   :pages="imagesArray" <--- images array here
   v-slot="flipbook"
   ref="flipbook"
   >
</Flipbook>

我的Posts.vue组件：

export default {
  name: 'GridOne',
  props: {
    page: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      request: {
        type: 'posts',
        params: { 
          per_page: this.$store.state.site.posts_per_page,
          page: this.page
        }, 
        showLoading: true 
      },
      totalPages: 0
    }
  },
  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request) <--- my response array
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    },
    setTotalPages() {
      this.totalPages = this.$store.getters.totalPages(this.request)
    }
  },
  created() {
    this.getPosts().then(() => this.setTotalPages())
  }
}

Answer 1

您可以使用JavaScript“地图”功能。此函数采用一个数组并返回一个新数组。

// If this is the response array....
const response = [{name: 'image 1', url: 'https://uri.com/img1'}, ...]


// Then you return something like this
response.map(item => {
    return {
       ...item,
       image_full: item.url
    }
})

将api响应数组转换为另一个数组以传递给Vue prop

1 个答案: