In my Vue component, I am encountering an issue when passing two different arrays to separate instances of the same component and then using v-for to send a single item from each array to another component via props. The problem arises when I inspect the prop in the final component, as it seems to retain the value from the previous array rather than the intended one.
Scenario:
<co-notifications class-name="writable" nots="{{ $notifications[0] }}"></co-notifications>
<co-notifications class-name="writable extended" nots="{{ $notifications[1] }}"></co-notifications>
CoNotifications Component:
<template>
<div>
<div v-for="notification in notifications">
<co-notification-item :class-name="className" :not="notification"></co-notification-item>
</div>
</div>
</template>
<script>
import notificationComponent from './NotificationComponent.vue';
export default {
props: ['className', 'nots'],
components: {
'co-notification-item': notificationComponent
},
computed: {
notifications(){
return JSON.parse(this.nots)
}
},
}
</script>
CoNotificationItem Component:
<template>
<div :class="['tableItem', className]">
<div class="textareaWrapper">
<input type="text" class="form-control" placeholder="Title" v-model="notification.title" v-if="notification.type === 'main'">
<textarea class="form-control" rows="6" placeholder="Some text..."
v-model="notification.text"></textarea>
</div>
<div class="buttonWrapper">
<button type="button" class="btn btn-success" @click="updateNotification"><i
class="fe fe-check mr-2"></i>Save
</button>
<button type="button" class="btn btn-danger" @click="deleteNotification"><i
class="fe fe-check mr-2"></i>Delete
</button>
</div>
</div>
</template>
<script>
import notificationComponent from './NotificationComponent.vue';
export default {
props: ['className', 'not'],
components:{
'co-notification-item': notificationComponent
},
data(){
return {
notification: this.not
}
},
methods: {
updateNotification(){
this.notification.text = "test";
},
deleteNotification(){
}
}
}
</script>
When reviewing the data in the arrays, there are 2 items in arr(0) and 2 items in arr(1). Upon inspecting the FIRST notifications with Vue tools, the information is shown correctly (CORRECT)
https://i.sstatic.net/eXuGa.png
However, when checking the other notifications reading from arr(1), the values are mixed up (INCORRECT)
https://i.sstatic.net/jfs69.png
I attempted using computed properties for CoNotification, which resolved the issue partially. However, it prevented me from binding v-model in CoNotificationItem since I needed the data() method. How can I ensure that the notification in CoNotificationItem matches the not variable while being accessible in data()? Why are conflicting values present?
Despite trying computed, watch, created, and mounted, I have been struggling with this issue for hours. Extensive research has been done including official documentation and online queries.
Some references I explored:
Vue.js passing props to data
Passing data from Props to data in vue.js
https://forum.vuejs.org/t/update-data-when-prop-changes-data-derived-from-prop/1517