[Vuejs]-How to use props inside the same vue component

by

0👍

You can’t modify props inside the component. Assuming the prop is called model instead of newGroup, your JS would work

export default {
  name: "AddGroupsModal",

  data : ()=>({
    newGroup : [],
}),
  props:{
    model: []
  },


methods: {

  generateGroup(){
     const newMeeting = {meetingUrl: "", meetingName: "", date: this.selectedDate, 
      startTime: "", endTime: ""};
    let finalMeetingArray = [];

    this.model.forEach((model, i) => {
      const key = `participant${i + 1}`;
      newMeeting[key] = model.voterUniqueName;
      newMeeting.startTime = model.startTime;
      newMeeting.endTime = model.endTime
    })
    finalMeetingArray.push(newMeeting)
    this.newGroup.push(newMeeting)
    console.log(JSON.stringify(this.newGroup)
  }

}
}

-1👍

Make sure you are passing the prop in kebab-case not in camelCase.

If your prop is newGroup you should pass it like:

<template>
   <add-groups-modal :new-group="[ ... ]" />
</template>

Leave a comment