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

Question

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

我需要从响应数组中获取“图像”属性并将其转换为另一个图像 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
    }
})