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:

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

Managing multiple JQuery Dialog boxes can be tricky, especially when you can only close one instance at a time

Using Object Value as Variable instead of String in JavaScript/React

Tips for Enhancing JavaScript Performance

Get rid of the folder from the URL using an <a> tag

Exploring the Contrast between router-link and RouterLink in VueIn this article

How to access the ID value from the URL within a different component that was passed as a prop in

Learn how to capture complete stack traces for errors when using Google Cloud Functions

Tips on transferring a Rails variable to Ajax

There seems to be an issue with the visibility of the b-button within the b-table component in

Is it possible to convert MUI components into strings on the client side?

Refreshing the identification of a button

Unit testing an API built with Express and Mongoose using Jest

The JSON.parse function encountered an Uncaught SyntaxError due to an unexpected token 'o

NodeJS: Implement a method to delete a file or folder using a path without the file extension (Strategic approach)

Identify the position of a mouse click event when dots overlap

Refreshable div element in a Code Igniter-powered web application

The file reading code in my Node.js application suddenly stopped working

Steps to create a zigzagging line connecting two elements

Automatically fill in a text box with previously saved information

jQuery's feature to select all elements except one and its children appears to be malfunctioning in Safari