[Vuejs]-Emitting two properties from child to parent

by

1👍

✅

I think the existing answers and mine share a similar technique, but I created a couple of simplified sample components based on your components.

Child component:

<template>
  <div class="emit-two-properties">
    <div class="form-group">
      <label for="segment-location">Segment Location</label>
      <select class="form-control" id="segment-location"
       v-model="segmentLocation" @change="selectSegmentLocation">
        <option v-for="(segLoc, index) in segmentLocations" :key="index"
         :value="segLoc">{{ segLoc.name }}</option>
      </select>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        segmentLocation: {},
        segmentLocations: [
          { value: "Residential", name: 'Residential building' },
          { value: "Workplace", name: 'Workplace' },
          { value: "Hospitality", name: 'Hospitality or Retail' },
          { value: "Real Estate", name: 'Real Estate' },
          { value: "Commercial Parking", name: 'Commercial Parking' },
          { value: "Fleets", name: 'Fleets' },
          { value: "Cities & Governments", name: 'Cities & Governments' },
          { value: "Corridor", name: 'Highway, Corridor or Petrol Station' }
        ],
      }
    },
    methods: {
      selectSegmentLocation() {
        this.$emit('select-segment-location-event', this.segmentLocation);
      }
    }
  }
</script>

Parent component:

<template>
  <div class="parent">
    <h4>Parent.vue</h4>
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <emit-two-properties @select-segment-location-event="updateSegmentLocation" />
          <button class="btn btn-secondary">Submit</button>
        </form>
        <p><span>Selected Segment Location Value:</span>{{ segmentLocation.value }}</p>
        <p><span>Selected Segment Location Name:</span>{{ segmentLocation.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import EmitTwoProperties from './EmitTwoProperties'

  export default {
    components: {
      EmitTwoProperties
    },
    data() {
      return {
        segmentLocation: {}
      }
    },
    methods: {
      updateSegmentLocation(segLoc) {
        this.segmentLocation = segLoc;
      }
    }
  }
</script>
👤Tim

1👍

you can create a method to get name and value from event.target (remove value from the end of child emit):

changeSelectedSegment(selected){
   this.selectedSegmentName = selected.name
   this.selectedSegmentValue = selected.value
}

in the parent change v-on:selectLocation to v-on:selectLocation="changeSelectedSegment($event)"

👤Hamid Shariati

1👍

you can define a method like this (this method emit an object with name and value properties to parent
)

methods: {
    selectLocation(event){
      if(event.target.value !== ''){
        const item = this.segmentLocations.find( item => item.value === event.target.value)
        this.$emit('selectLocation', {
          name: item.name,
          value: event.target.value
        })
      }
    }
  },

and change this line :

<select v-model="selectedSegmentValue" v-on:change="$emit('selectLocation', $event.target.value)">

to this:

<select v-model="selectedSegmentValue" v-on:change="selectLocation">
👤Mohammad Masoudi

Leave a comment