Vue3: глубокая реактивность
Итак, у меня есть очень простой сценарий, который я не могу заставить работать (найдите код на игровой площадке vue)
<script setup>
import { ref, reactive } from 'vue'
const disabled = ref(false);
const menu = reactive<[]>([
{
disabled: disabled.value
}
]);
</script>
<template>
{{disabled}}
<button @click = "disabled = !disabled">
Toggle
</button>
<br>
{{menu[0]?.disabled}}
</template>
Что я делаю не так? почему меню?[0].disabled не реактивно?
Ответы 2
disabled передается по значению в блоке настройки, menu никак не может быть связан с disabled таким образом, что disabled.value === false делает это эффективно таким же, как:
const menu = reactive<[]>([{ disabled: false }]);
Должен быть:
const menu = reactive<[]>([{ disabled }]);
Ссылка разворачивается при использовании внутри реактивного объекта, menu[0].disabled === disabled.value.
Пожалуйста, сделайте так, чтобы код отражал ваш случай. Это возможно, но из описания непонятно, как это должно работать. Непонятно, почему menu следует смешивать с другим состоянием. Если его видимость зависит от свойства хранилища, используйте это свойство. По сути, есть два способа заставить menu реагировать на другие реактивные значения — вычисляемый или наблюдатель.
Не хочу показаться грубым... но я не могу опубликовать всю свою кодовую базу и надеяться, что кто-нибудь расшифрует, что это такое? Я сделал это настолько просто и прямо, насколько это возможно, чтобы проиллюстрировать проблему .... const disabled = ref(false); может быть любым (значение из магазина пинии в моем случае или что-то совершенно другое .... дело в том, что он реактивный и когда это значение обновляется, а пункт меню — нет, хотя я использовал reactive для обеспечения глубокой реактивности объекта
Правильно, именно поэтому требуется stackoverflow.com/help/mcve для вопросов, связанных с кодом, это фактически в правилах SO. Если код не отражает вашу проблему, только вы знаете, что он на самом деле означает. Если это значение из пинии, то это может быть const { disabled } = storeToRefs(appStore), если вы хотите знать, как решение применимо к магазину, но все еще неясно, почему оно должно быть в menu и как оно будет работать, если есть несколько пунктов меню.
есть несколько пунктов меню, и это не имеет значения ... единственное, что я хочу знать ... это как может обновляться пункт меню, когда динамическое (реактивное) значение внутри изменяется, не имеет значения, откуда оно берется и как есть много других предметов. Другими словами... приведенный мной пример не работает... Я хочу знать, как заставить его работать... это очень просто
Если это то, что вы хотели знать, то это то, что показывает пост. И FWIW, принятый ответ показывает то же самое, но без объяснения, я не уверен, что вас здесь смутило.
Разве это не тот же ответ, что и принятый, только опубликованный раньше, с достойным объяснением и без дампа кода? Что мне не хватает? 1+
Попробуй это:
<script setup>
import { ref, reactive } from 'vue'
const disabled = ref(false);
const menu = reactive([
{
disabled
}
]);
</script>
<template>
{{disabled}}
<button @click = "disabled = !disabled">
Toggle
</button>
<br>
{{menu[0]?.disabled}}
</template>
но этот пример был упрощен... моя реальная цель - сделать кнопку меню отключенной, когда что-то загружается... и я знаю, когда она загружается из хранилища состояний.... так что в моем случае это будет даже сложнее... , например
disabled = appStore.isLocading.... так есть ли способ сделать меню (с его свойствами) реактивным?