Vue 3 Изменение значение реактивного объекта
Как можно изменить значение реактивного объекта? Есть родительский компонент. В котором вызывает дочерний компонент ModeList. В дочерний компонент через цикл , прокидываю элементы объекта modes.
<template>
<template v-for="mode in modes" :key="mode.id">
<ModeList :mode="mode" @isTime="eventIsTime" />
</template>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue"
import Modes from "@js/types/Modes"
import ModeList from "@js/components/lists/it-list-mode.vue"
export default defineComponent({
components: { ModeList },
setup() {
const modes = ref<Modes[]>([
{
id: 1,
wday: 0,
isTime: true,
...
},
{
id: 2,
wday: 1,
isTime: false,
....
},
])
const eventIsTime = (value: Object) => {
// Example var
const wday = 0
const id = 1
const rs = modes.value.find(function (x) {
return x.id == 1 && x.wday == 1
})
if (rs) {
rs.isTime = true
}
}
return {
modes,
eventIsTime,
}
},
})
</script>
Дочерний компонент. После каких-то манипуляций в дочернем компоненте, необходимо прокидывать в родительский компонент значение isTime. Из этого компонента эмичу наверх данные. В функции eventIsTime провожу поиск объекта который нужен , для установки нового значения isTime. Но установить не получается. Как правильно найти и установки свойство у реактивного объекта ?
<template>
<ClCheckbox v-model="isTimeValue"></ClCheckbox>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, toRefs } from "vue"
import Modes from "@js/types/Modes"
import ClCheckbox from "@js/components/form/cl-checkbox.vue"
export default defineComponent({
components: { ClCheckbox },
props: {
mode: {
required: true,
type: Object as PropType<Modes>,
},
},
emits: ["isTime"],
setup(props, context) {
const mode = toRefs(props.mode)
const isTimeValue = computed({
get(): boolean {
return props.mode.isTime
},
set(value: boolean) {
mode.isTime.value = value
context.emit("isTime", { isTime: value, id: mode.id.value })
},
})
return {
...mode,
isTimeValue,
}
},
})
</script>