Я передаю два разных массива одному и тому же компоненту, но два его экземпляра. Затем внутри этих экземпляров я делаю v-for и отправляю один элемент массива другому компоненту с помощью реквизита. Проблема в том, что когда я проверяю инструменты Vue для последнего компонента, я вижу, что реквизит хорош, но когда я пытаюсь присвоить его данным, он возвращает реквизит из предыдущего массива (тот, который был отправлен в другой компонент).
Laravel:
<co-notifications class-name="writable" nots="{{ $notifications[0] }}"></co-notifications>
<co-notifications class-name="writable extended" nots="{{ $notifications[1] }}"></co-notifications>
CoNotifications:
<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
},
// data() {
// return {
// notifications: JSON.parse(this.nots),
// }
// },
computed: {
notifications(){
return JSON.parse(this.nots)
}
},
}
</script>
CoNotificationItem
<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>
Что касается данных в массивах, у меня есть 2 в arr (0) и 2 в arr (1).
Когда я открываю инструменты Vue в уведомлениях FIRST , я вижу это ( ЭТО ХОРОШО * )
Однако, когда я открываю другие уведомления, которые читаются из arr (1), я вижу это ( это явно не то, что должно быть )
Как вы можете видеть, я использовал computed для CoNotification, но если я удаляю его и использую только data (), оба не получают один и тот же массив, но если я использую computed, это нормально. Однако я не могу использовать computed in CoNotificationItem, потому что мне нужно иметь его в data (), чтобы я мог связать его с v-моделью.
Итак, мой вопрос, как сделать уведомление для CoNotificationItem таким же, как , а не (переменная), но быть доступным в data (), чтобы я мог добавить к нему v-модель - почему я получать смешанные значения?
Примечание: я также пробовал с computed and watch и создал / смонтировал.
Я застрял в этой проблеме на полдня, и я искал себя как * off как в официальных документах, так и в учебниках / вопросах по stackoverflow и еще много чего.
Некоторые поиски, которые я пробовал:
Vue.js, передавая реквизиты в данные
Передача данных из Props в data в vue.js
https://forum.vuejs.org/t/update-data-when-prop-changes-data-derived-from-prop/1517