What is the method for retrieving the key value of a chosen card?

Question

What is the method for retrieving the key value of a chosen card?

Here is the code snippet from my template:

<v-item-group v-model="selectedAddress">
  <v-row class="mx-n6">
    <v-flex v-for="{id, title, address} in userAddresses" :key="id" sm12 md6 lg6 class="px-2">
      <CheckDeliveryAddress
        :id="`check-address-${id}`"
        :data-testid="`checkAddress${id}`"
        :title="title"
        :address="address"
      />
    </v-flex>
  </v-row>
</v-item-group>
<rw-button
  class="save-check-btn my-2"
  xs-flex
  color="primary"
  data-testid="saveCheckAddress"
  text="Submit"
  @click="commitCheckAddressSelection"
/>

This template utilizes a component for displaying addresses in cards. I have a question regarding extracting the id prop from the selected card. Can you provide guidance on how to achieve this?

<template>
  <v-item v-slot="{active, toggle}" :value="address">
    <rw-card :id="id" interactive :selected="active" dense @click="toggle">
      <rw-card-title>
        <h3>{{ title }}:</h3>
      </rw-card-title>
      <rw-card-body>
        <div>{{ address.addressLine1 }}, {{ address.addressLine2 }}</div>
        <div>{{ address.city }}, {{ address.state }}</div>
        <div>{{ address.zipCode }}</div>
      </rw-card-body>
    </rw-card>
  </v-item>
</template>

<script>
export default {
  name: 'CheckDeliveryAddress',
  props: {
    id: {type: String, required: true},
    title: {type: String, required: true},
    address: {type: Object, required: true},
  },
  data: () => ({}),
};
</script>

javascript vue.js vuejs2 vuetify.js

Answer 1

Answer №1

Within the function CheckDeliveryAddress, make sure to update the v-item's value by incorporating the id so that it can be passed on to the parent's selectedAddress. One way to achieve this is by binding the value to a computed property that includes both the id and address:

<template>
  <v-item :value="value">
    ...
  </v-item>
</template>

<script>
export default {
  props: {
    id: /*...*/
    address: /*...*/
  },
  computed: {
    value() {
      return {
        id: this.id,
        address: this.address,
      }
    }
  }
}
</script>

https://codesandbox.io/s/stoic-sanne-gzsrq?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FCheckDeliveryAddress.vue&theme=dark

Answer 2

Within the function CheckDeliveryAddress, make sure to update the v-item's value by incorporating the id so that it can be passed on to the parent's selectedAddress. One way to achieve this is by binding the value to a computed property that includes both the id and address:

<template>
  <v-item :value="value">
    ...
  </v-item>
</template>

<script>
export default {
  props: {
    id: /*...*/
    address: /*...*/
  },
  computed: {
    value() {
      return {
        id: this.id,
        address: this.address,
      }
    }
  }
}
</script>

https://codesandbox.io/s/stoic-sanne-gzsrq?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FCheckDeliveryAddress.vue&theme=dark

Answer 3

Answer №2

Imagine a situation where your child component CheckDeliveryAddress is attempting to send data to its parent component.

In Vue, the only way to achieve this is by using an event emitter.

You can accomplish this by calling:

this.$emit('parent-event-method-name', data1, data2);

within the parent component.

<v-flex v-for="{id, title, address} in userAddresses" parent-event-method-name="methodName"
:key="id" sm12 md6 lg6 class="px-2">

methods:{
    methodName:function(data1, data2){

    }
}

CheckDeliveryAddress component structure:

<template>
      <v-item v-slot="{active, toggle}" :value="address" @click="raiseEvent">
        <rw-card :id="id" interactive :selected="active" dense @click="toggle">
          <rw-card-title>
            <h3>{{ title }}:</h3>
          </rw-card-title>
          <rw-card-body>
            <div>{{ address.addressLine1 }}, {{ address.addressLine2 }}</div>
            <div>{{ address.city }}, {{ address.state }}</div>
            <div>{{ address.zipCode }}</div>
          </rw-card-body>
        </rw-card>
      </v-item>
    </template>
export default {
      name: 'CheckDeliveryAddress',
      props: {
        id: {type: String, required: true},
        title: {type: String, required: true},
        address: {type: Object, required: true},
      },
      data: () => ({}),
      methods:{
        raiseEvent:function(e){
           this.$emit('on-card-select', this.id);//this.id is selected card id
        }
     }
    };

Your Parent component setup:

template:
'<v-item-group v-model="selectedAddress">
              <v-row class="mx-n6">
                <v-flex v-for="{id, title, address} in userAddresses" :key="id" sm12 md6 lg6 class="px-2" on-card-select="handleCardSelect">
                  <CheckDeliveryAddress
                    :id="`check-address-${id}`"
                    :data-testid="`checkAddress${id}`"
                    :title="title"
                    :address="address"
                  />
                </v-flex>
              </v-row>
            </v-item-group>
    <rw-button
              class="save-check-btn my-2"
              xs-flex
              color="primary"
              data-testid="saveCheckAddress"
              text="Submit"
              @click="commitCheckAddressSelection"
            />'

methods:{
   handleCardSelect:function(cardId){
      console.log(cardId);
   }
}

Answer 4

Imagine a situation where your child component CheckDeliveryAddress is attempting to send data to its parent component.

In Vue, the only way to achieve this is by using an event emitter.

You can accomplish this by calling:

this.$emit('parent-event-method-name', data1, data2);

within the parent component.

<v-flex v-for="{id, title, address} in userAddresses" parent-event-method-name="methodName"
:key="id" sm12 md6 lg6 class="px-2">

methods:{
    methodName:function(data1, data2){

    }
}

CheckDeliveryAddress component structure:

<template>
      <v-item v-slot="{active, toggle}" :value="address" @click="raiseEvent">
        <rw-card :id="id" interactive :selected="active" dense @click="toggle">
          <rw-card-title>
            <h3>{{ title }}:</h3>
          </rw-card-title>
          <rw-card-body>
            <div>{{ address.addressLine1 }}, {{ address.addressLine2 }}</div>
            <div>{{ address.city }}, {{ address.state }}</div>
            <div>{{ address.zipCode }}</div>
          </rw-card-body>
        </rw-card>
      </v-item>
    </template>
export default {
      name: 'CheckDeliveryAddress',
      props: {
        id: {type: String, required: true},
        title: {type: String, required: true},
        address: {type: Object, required: true},
      },
      data: () => ({}),
      methods:{
        raiseEvent:function(e){
           this.$emit('on-card-select', this.id);//this.id is selected card id
        }
     }
    };

Your Parent component setup:

template:
'<v-item-group v-model="selectedAddress">
              <v-row class="mx-n6">
                <v-flex v-for="{id, title, address} in userAddresses" :key="id" sm12 md6 lg6 class="px-2" on-card-select="handleCardSelect">
                  <CheckDeliveryAddress
                    :id="`check-address-${id}`"
                    :data-testid="`checkAddress${id}`"
                    :title="title"
                    :address="address"
                  />
                </v-flex>
              </v-row>
            </v-item-group>
    <rw-button
              class="save-check-btn my-2"
              xs-flex
              color="primary"
              data-testid="saveCheckAddress"
              text="Submit"
              @click="commitCheckAddressSelection"
            />'

methods:{
   handleCardSelect:function(cardId){
      console.log(cardId);
   }
}

What is the method for retrieving the key value of a chosen card?

Answer №1

Answer №2

Similar questions

Error in jQuery when trying to access the src attribute of an image: "undefined src

Array of initials for full names in JavaScript

How to retrieve the nearest sibling in AngularJS without using jQuery

Triggering controller actions in JavaScript with bootgrid

The express.js and passport.js middleware in my application are functioning properly and executing as expected, however, there seems to be an issue with the

Issue with nested directive not triggering upon page load

Vue Router with a Dynamic Twist

Is there a way for a button to automatically delete its corresponding index in an array upon being clicked?

Is it possible to create a fast function using vue's @click directive?

Can anyone recommend a super sleek drop-down navigation menu that includes both images and text descriptions?

Adding options to a select element using JavaScript dynamically

Tips for utilizing a variable name with ajax in jQuery

Ways to present a pop-up dialog box featuring word corrections

Move all the attributes from one object stored in an array to another object within the same array using JavaScript or TypeScript

Handling synchronous reception with Socket.io

Guide on adjusting the language settings for notifications in chosen.js?

Incorporating a protected Grafana dashboard into a web application

Creating a gaming application with Phaser.js and Ionic with subpar rendering capabilities

Real-time data update with Socket io: instantly refresh data on another page upon form submission without having to manually

Would you suggest this approach for creating a personalized form component in vue 3?