VUEJS - Link the output from my function to my sub-template

Question

VUEJS - Link the output from my function to my sub-template

I am looking for a way to link the output of my function with the child template.

methods object

  methods: {
    filterOptions(checkedValues: any) {
      let filtered = this.cards.filter(card => {
        return card.profile
                .map(profile => profile.salary)
                .find(profileSalary => {
                  return checkedValues.find((salaryOption: number) => {
                    return profileSalary >= salaryOption;
                  });
                });
      });
    }
  }

template

<template>
  <section id="app">
    <Gallery v-bind:filtered="filtered"/>
  </section>
</template>

javascript vue.js

Answer 1

Answer №1

You have the ability to send an array of objects as a parameter to the child component.

View the documentation.

Child Component

<template>
    <div>
        <span v-for="item in arr"
            :key="item.id">{{ item.name }}</span>
    </div>
</template>
<script>
    export default {
        name: 'Child',
        props: {
            arr: {
                type: Array,
                default: () => []
            }
        }
    }
</script>

Parent Component

<template>
    <div>
        <child :arr="parentArray"/>
    </div>
</template>
<script>
import Child from './Child.vue'
    export default {
        name: 'Parent',
        components: {
            Child
        },
        computed: {
            parentArray () {
                return [...whatever]
            } 
        }
    }
</script>

Answer 2

You have the ability to send an array of objects as a parameter to the child component.

View the documentation.

Child Component

<template>
    <div>
        <span v-for="item in arr"
            :key="item.id">{{ item.name }}</span>
    </div>
</template>
<script>
    export default {
        name: 'Child',
        props: {
            arr: {
                type: Array,
                default: () => []
            }
        }
    }
</script>

Parent Component

<template>
    <div>
        <child :arr="parentArray"/>
    </div>
</template>
<script>
import Child from './Child.vue'
    export default {
        name: 'Parent',
        components: {
            Child
        },
        computed: {
            parentArray () {
                return [...whatever]
            } 
        }
    }
</script>

VUEJS - Link the output from my function to my sub-template

Answer №1

Child Component

Parent Component

Similar questions

Use a for loop to iterate through elements and retrieve input values using getElementById()

"Embracing Progressive Enhancement through Node/Express routing and the innovative HIJAX Pattern. Exciting

Obtain JSON information from a Javascript response using Puppeteer:

Using jQuery to arrange information from an API into a table

What is the process for retrieving the date and time a location was added to Google Maps?

Tips on gathering information from an HTML for:

Issue with Nuxt 3 and .nojekyll file not being effective on Github Pages

Guidance on redirecting and displaying the URL retrieved from an API response object in the browser using express and axios

Update a roster with AJAX following the addition or removal of a user

Is there a way to decode/compile/interpret the data within nested HTML tags within my AngularJS directives?

Setting field names and values dynamically in MongoDB can be achieved by using variables to dynamically build the update query

How can a bootstrap gallery maintain a consistent size despite variations in picture dimensions?

MANDATORY activation of CONFIRMATION

Javascript: Insert a class declaration post loading of the page

Removing commas and non-numeric symbols from a string using JavaScript

Having trouble retrieving data from a JSON object that has been stringified. This issue is arising in my project that utilizes Quasar

The head.js feature similar to "Modernizr" does not recognize ms-edge

The disappearing act of the Show/Hide Button in Sencha Touch 2.3.1: what's the

What is the correct location to define the "env" setting in the eslint.config.js file?

An issue arises with the Datatables destroy function