[Vuejs]-How to list multiple objects from laravel to vue using javascript filter function?

by

0👍

  • First use a compute function to link view and when you change storeName the app detect changes and paint again
  • Second, to make a array of shop_name use .filter to filter and them a .map to adapt your data

My advice is you store all data on vue data side, and on your computed method filter data and optional parse data, Also you can access to data with template, so you can parse data on template.

Something like this

export default {
    name: 'loquesea',
    data: {
        affiliates: []
    },
    mounted() {
          axios.get('/dashboard/affiliates')
        .then(res => {
            let data = res.data;
            this.affiliates = data.affiliates;
        })
    },
    computed: {
        getStoresName() {
            return this.affiliates.filter(() => {
                // what you want
                return true;
            }).map((affiliate) => {
                return affiliate.shop_name;
            })
        }
    }
}

on your template.html

<ul id="example-1">
  <li v-for="storeName in getStoresName">
    {{ storeName  }}
  </li>
</ul>

Leave a comment