Как в компоненте Vue3 следить за переменной родителя?

Question

[kpot1979]

На странице родителя есть подключенный компонент Collaps. По умолчанию все Collaps закрыты. Я могу по отдельности Раскрыть/Закрыть каждый Collaps. При клике по ссылке "Раскрыть/Закрыть все" нужно чтоб все Collaps раскрывались или закрывались. Я не могу понять как мне сделать чтоб на любые изменения переменной collapsStatus вызывалась функция update() в компоненте Collaps?

Код родителя:

<script setup>
import { ref } from 'vue'
import Collaps from '@/Components/Collaps.vue'

const collapsStatus = ref(false);
</script>
<template>
    <a href="#" class="btn" @click.prevent="collapsStatus = !collapsStatus">
        Раскрыть/Закрыть все
    </a>
    <Collaps attribute="persons-collaps-id" v-model="collapsStatus">
        <template #trigger>
            Покупатели
        </template>
        <template #content>
            <p>Lorem ipsum dolor sit amet</p>
        </template>
       </Checkbox>
                <label :for="person.ids">{{ person.person_title }}</label>
            </div>
        </template>
    </Collaps>
    <Collaps attribute="сategorys-collaps-id" v-model="collapsStatus">
        <template #trigger>
            Категории
        </template>
        <template #content>
            <p>Lorem ipsum dolor sit amet</p>
        </template>
    </Collaps>

Код компонента Collaps:

<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
    attribute: {
        type: String,
        default: "",
    },
    modelValue: {
        type: Boolean,
    },
});

let open = ref(props.modelValue);

function update() {
    open.value = !open.value;
}

const showClass = computed(() => {
    if (open.value) {
        return 'show';
    } else {
        return '';
    }
});
</script>

<template>
    <div :class="[showClass]">
        <h6>
            <a href="#" data-toggle="collapse" :data-target="`#${props.attribute}`" role="button"
                @click="update" :data-open=" open"
                :aria-expanded="open" :aria-controls="props.attribute">
                <slot name="trigger" />
            </a>
        </h6>
        <div class="collapse" :id="props.attribute" :class="[showClass]">
            <slot name="content" />
        </div>
    </div>
</template>

Answer 1

[MaxRyazan]

В компоненте Collaps:

watch(() => props.modelValue, () => {
  if(props.modelValue) update()
})

Это будет работать при условии что всё остальное работает) я в код не особо всматривался.

Comments

[kpot1979]

Спасибо за ответ. Теперь работает, но почему-то при первой загрузке страницы при нажатии на кнопку "Раскрыть/Закрыть все" при одном клике а потом только когда нажимаешь два раза.

[MaxRyazan]

watch(() => props.modelValue, () => {
  if(props.modelValue) update()
},{immediate: true})

Это чтобы отрабатывало сразу при отрисовке