Steps for passing a prop to a child component when clicked in Vue2

Question

Steps for passing a prop to a child component when clicked in Vue2

The intention of this code is to activate a child component when clicking on it within a parent Vue.

Parent Vue file:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

Child component:

props: {
  selected: Boolean
},

data () {
  return {
    selected: selected
  }
},

How can I pass the selected prop to a child component on click? Instead of setting it like this:

<PackageItem
  :selected="true"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

This would set all items to be selected as true, but I only want to do it on click.

javascript vue.js

Answer 1

Answer №1

If you wish to achieve this functionality:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="
    selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
  :selected="selected[pack.id]"
>

Simply utilize the selectPackageItem method to designate the selected package:

selectPackageItem(packId, packLabel, packPrice, packIndex) {
    this.$set('selected', packId, true)

Alternatively, if you want a toggle effect between true and false upon click:

this.$set('selected', packId, !this.selected[packId])

For the data option, keep it simple with:

selected: []

Note that the extra code in your child component is unnecessary:

/* REMOVE
 data () {
   return {
     selected: selected
   }
 },
*/

To access selected props within script, use this.selected, while inside the template simply refer to selected.

Answer 2

If you wish to achieve this functionality:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="
    selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
  :selected="selected[pack.id]"
>

Simply utilize the selectPackageItem method to designate the selected package:

selectPackageItem(packId, packLabel, packPrice, packIndex) {
    this.$set('selected', packId, true)

Alternatively, if you want a toggle effect between true and false upon click:

this.$set('selected', packId, !this.selected[packId])

For the data option, keep it simple with:

selected: []

Note that the extra code in your child component is unnecessary:

/* REMOVE
 data () {
   return {
     selected: selected
   }
 },
*/

To access selected props within script, use this.selected, while inside the template simply refer to selected.

Answer 3

Answer №2

To take control of the selection process from the parent component, you can create an array to store selected ids and a function to check if an id is already selected.

data(){
    return {
        ...
        selected: []
    }
},
methods: {
    isSelected(id){
        return this.selected.indexOf(id) > -1;
    }
}

In your click method, simply add or remove the clicked item's id in the array.

// Placeholder for `selectPackageItem` method
if(this.isSelected(id)){
    // Option to deselect
} else {
    this.selected.push(id);
}

Now, your template will look like this:

<PackageItem v-for="pack in packagesData" :selected="isSelected(pack.id)" :key="pack.id" @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)">

Answer 4

To take control of the selection process from the parent component, you can create an array to store selected ids and a function to check if an id is already selected.

data(){
    return {
        ...
        selected: []
    }
},
methods: {
    isSelected(id){
        return this.selected.indexOf(id) > -1;
    }
}

In your click method, simply add or remove the clicked item's id in the array.

// Placeholder for `selectPackageItem` method
if(this.isSelected(id)){
    // Option to deselect
} else {
    this.selected.push(id);
}

Now, your template will look like this:

<PackageItem v-for="pack in packagesData" :selected="isSelected(pack.id)" :key="pack.id" @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)">

Answer 5

Answer №3

After some brainstorming, I devised a more polished solution:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  :selected="isSelectedPackage(pack.index)"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

I also implemented a method to validate selected packages stored in an array:

isSelectedPackage (index) {
  let packages = this.packages
  let isSelected = packages.some(p => p.index === index)
  return isSelected
}

The function isSelectedPackage outputs a boolean value. The variable this.packages holds an array of active packages that were clicked, each containing detailed information alongside the ID and index. By using .some, I compare the clicked item's index with those in the array (this.packages) to determine if they match.

Answer 6

After some brainstorming, I devised a more polished solution:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  :selected="isSelectedPackage(pack.index)"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

I also implemented a method to validate selected packages stored in an array:

isSelectedPackage (index) {
  let packages = this.packages
  let isSelected = packages.some(p => p.index === index)
  return isSelected
}

The function isSelectedPackage outputs a boolean value. The variable this.packages holds an array of active packages that were clicked, each containing detailed information alongside the ID and index. By using .some, I compare the clicked item's index with those in the array (this.packages) to determine if they match.

Steps for passing a prop to a child component when clicked in Vue2

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting sound problems in Angular JS

Changing the opacity of the background when a Bootstrap modal is displayedHere's how you can

Angular checkboxes not triggering ng-click event

What is the best way to eliminate the hash from the URL of a single-route Angular application without the need for ui.router?

`Optimizing Performance using jQuery Functions and AJAX`

Dealing with jQuery hover disruption while toggling classes

Encountering mixed content error on webpack development server

JavaScript module dependency management technique

Turn the camera to focus on the chosen object using three.js

Employing the Vuetify validation feature for ensuring the accuracy of text input through manual

Duplicate the Date object without retaining previous data

How can one stop users from navigating away from a webpage using the back button on their browser?

Implementing a smooth camera movement in Three.js using the mousewheel

Efficiently loading images into a navigation flyout: the ultimate guide

Tips for resolving issues with this end-to-end test

Executing a function when a webpage loads in Javascript

Transferring SQL server dates to jQuery Calendar through AJAX communication

Defining an empty multidimensional array involves declaring a variable that can store

Update with the string before it in a JSON list

Implementing Dynamic Weight-based Pricing with CodeIgniter and AJAX