aimeos and vuejs ( axios.get )

mahmoud · Post by **mahmoud** » 02 Jul 2020, 20:05

Hello,
I use laravel and vuejs I want to display the product attributes using the following function:

<script>
    export default {
        data () {
            return {
                products: {}
                    }
                },
            created () {
                this.getProducts (); },
            methods: {
                getProducts () {
                   axios.get ('/ api / jsonapi / product')
                    .then (response => this.products = response.data)
                    .catch (err => console.log (err));
                }
            }
    }
</script>

and display the data in the component by the for ball like this:

Code: Select all

<tr v-for = "(product, index) in products.data"
                        : key = "index">
                        <th scope = "row"> {{index}} </th>
                        <td> {{product.id}} </td>
                       <td>  {{product.attributes.product.id. }}</td>
                        <td> </td>
                          <td> {{product ['attributes'] [product ['id']]}} </td>
                         </tr>

but the last two lines ( {{product.attributes.product.id. }} ... ) are not correct.

Thank you

mahmoud · Post by **mahmoud** » 03 Jul 2020, 00:55

Hello,
the secret line is :

Code: Select all

 {{ product.attributes["product.url"]}}

It works very well !!! , but now I want to display pagination but I don't know how, there is no page variable to do like this:

Code: Select all

</div>  <div class="card-footer d-flex justify-content-center">
                    <pagination :data="products" @pagination-change-page="getProducts"></pagination>

                    </div>

this for offset:

Code: Select all

 axios.get('/api/jsonapi/product?page[offset]=0')

Thank you

Post by **aimeos** » 03 Jul 2020, 11:34

The links section of the response contains the first, prev, next and last links which you can use to build the pagination.

Help for Aimeos