Преобразуйте массив ответов API в другой массив для передачи в Vue.

Question

Я хочу использовать этот компонент vue flipbook , и для него требуется массив URL-адресов изображений для "страниц". Ответ на мои сообщения приходит от WordPress Rest API.

Мне нужно получить свойство image из массива ответов и преобразовать его в другой массив URL-адресов изображений. Обычно я использовал бы posts () в computed как v-for=post in posts в моем шаблоне и отображать изображение как post.image_full в цикле ..

Компонент Flipbook:

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

Компонент My 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 "map". Эта функция берет один массив и возвращает новый.

// 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
    }
})