In my Vue app, I have successfully sent an array from one component to another. However, I am now facing a challenge in visually displaying this data. The issue arises when trying to extract and display specific values, like the date itself. Despite being able to log the data, attempting to access individual properties results in a "cannot read property" error. I attempted to iterate through the parent array, but encountered the same error.
If anyone could provide some guidance on how to resolve this issue, I would greatly appreciate it.
Within the child component's method that fills the array with data:
data: () => ({
selectedTime: [],
dates: [{date : new Date().toISOString().substr(0,10), time: []}],
}),
methods:{
addTimeFields(){
this.selectedTime.push({
startTime:"",
endTime: "",
})
this.dates[0].time.push(this.selectedTime)
},
In the parent component, I am able to successfully receive the array passed from the child (save method). However, when attempting to loop through the array for display purposes, I encounter an error:
<v-card-text v-for="(i,index) in finalDate">
<v-btn>
{{i.finalDate}}
</v-btn>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-actions>
<v-spacer />
<v-col>
<vs-button>Generate Meeting Link</vs-button>
</v-col>
{{finalDate}}
</v-card-actions>
</v-card>
</template>
<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";
export default {
name: "NextMeetingCardComponent",
components: { DatePickerComponent },
data: () => ({
dialog: false,
finalDate: [],
menu: false,
modal: false,
menu2: false
}),
methods:{
save() {
this.finalDate.push(
this.$refs.datepicker.dates
)
}
Error message:
[Vue warn]: Property or method "date" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <NextMeetingCardComponent>
<DashboardComponent> at src/views/DashboardComponent.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>