Guide on displaying several items from Laravel to Vue through the JavaScript filter method?

Question

Guide on displaying several items from Laravel to Vue through the JavaScript filter method?

I need help transferring multiple objects from laravel to vue and filling my vue objects with information retrieved from the database.

This is the data received from laravel:

https://i.sstatic.net/2Hnk5.png

Vue objects to be populated:

  storeName: {},
  storeUrl: {},
  appName: {},
  price: {},
  share: {},

Here's where the data will be populated:

  mounted() {
  axios.get('/dashboard/affiliates')
    .then(res => {
      let data = res.data;

      this.storeName = data.affiliates.shop_name;
      console.log(data.affiliates);
    })

It seems like using the filter function in JavaScript would be a good approach to populate the vue objects, but I'm unsure of how to implement it. Can someone guide me on how to achieve this?

What is the best way to fill my vue objects with data so that I can later display them in a v-for loop on the view?

javascript laravel vue.js object laravel-5

Answer 1

Answer №1

Begin by using a compute function to connect the view and whenever you change the storeName, the app will detect changes and repaint.
Next, create an array of shop_names using .filter to filter and then use .map to adjust your data accordingly.

My recommendation is to store all the data on the Vue data side, and within your computed method, filter the data and optionally parse it. You can also access the data within the template, allowing you to parse data directly in the template.

You could implement 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(() => {
                // add your filtering logic here
                return true;
            }).map((affiliate) => {
                return affiliate.shop_name;
            })
        }
    }
}

In your template.html file:

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

Answer 2

Begin by using a compute function to connect the view and whenever you change the storeName, the app will detect changes and repaint.
Next, create an array of shop_names using .filter to filter and then use .map to adjust your data accordingly.

My recommendation is to store all the data on the Vue data side, and within your computed method, filter the data and optionally parse it. You can also access the data within the template, allowing you to parse data directly in the template.

You could implement 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(() => {
                // add your filtering logic here
                return true;
            }).map((affiliate) => {
                return affiliate.shop_name;
            })
        }
    }
}

In your template.html file:

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

Guide on displaying several items from Laravel to Vue through the JavaScript filter method?

Answer №1

Similar questions

How to perfect the alignment of TimePicker in angular UI

VUEJS - The component <category-edit> is not recognized. Have you properly registered the component?

Express.js application experiencing technical difficulties

Utilizing Node Js and Socket.Io to develop a cutting-edge bot

Tips for aligning a select and select box when the position of the select has been modified

Sending form data from a third-party website to Django

Concealing div containers and eliminating gaps

JavaScript - retrieve only the domain from the document.referrer

How can I extract the JSON value as a string?

If the checkbox is selected, include an anonymous email in the field and conceal the field

Exploring methods to test the use of custom CSS variables in VueJS

Preventing FlatList from scrolling when re-sizing

Struggling to configure an input field using ExtJS

I am constantly encountering this issue: Uncaught TypeError - It's impossible to read properties of undefined (specifically 'image') in PromptCard at PromptCard.jsx on line 37

An issue arises when attempting to utilize URL parameters within a loader

Struggling to get getInitialProps working in dynamic routes with Next.js?

Encountered a PrismaClientValidationError in NextJS 13 when making a request

AngularJS directives and controller scope

Getting the selected item from a dropdown menu and including it in an email

Is there a method to eliminate the necessity of including the server IP address in the nginx configuration file?