Vue.js中数组内Ref值无法更新的问题求助

问题本质 #

你猜的没错，selectedColors数组里存的是各个ref的value副本（字符串类型），不是ref对象本身。当颜色选择器修改ColorHeader这类ref的value时，数组里的旧字符串值不会自动更新，导致页面背景色没变化。

解决步骤 #

1. 重构响应式数组

把selectedColors改成存储ref对象的响应式数组，让数组元素和单个ref保持同一个引用，这样ref的value变化时数组能同步感知：

// script setup 中修改
const selectedColors = ref([ColorHeader, ColorBody, ColorFooter]);

2. 调整颜色选择器模板

遍历ref数组时，要访问ref的value来显示颜色，同时v-model绑定到对应的ref对象，顺便把按钮标题改成动态对应不同区域：

<template>
    <VMenu v-for="(colorRef, index) in selectedColors" :key="index" location="bottom">
        <template #activator="{ props }">
            <VBtn width="260" :color="colorRef.value" v-bind="props">
                <p class="p-color">
                    {{ ['Header', 'Body', 'Footer'][index] }} Color <br />
                    <span class="text-uppercase">{{ colorRef.value }}</span>
                </p>
            </VBtn>
        </template>
        <VList>
            <VColorPicker hide-inputs="true" v-model="colorRef.value" />
        </VList>
    </VMenu>
</template>

3. 更新目标区域的样式绑定

因为数组里现在是ref对象，绑定背景色时要明确取value，同时改用对象形式的样式绑定更规范：

<div id="app">
    <div class="app">
        <div class="header" :style="{ backgroundColor: selectedColors[0].value + '!important' }">
            <h1>Header</h1>
        </div>
        <div class="content" :style="{ backgroundColor: selectedColors[1].value + '!important' }">
            <p>This is the main content area.</p>
        </div>
        <div class="footer" :style="{ backgroundColor: selectedColors[2].value + '!important' }">
            <p>Footer</p>
        </div>
    </div>
</div>

完整修改后的代码片段 #

CSS（保持不变）

:root {
    --custom-color: #ff0;
    --custom-color-body: #00ff;
    --custom-color-footer: #FF000F;
}

颜色选择器组件

<template>
    <VMenu v-for="(colorRef, index) in selectedColors" :key="index" location="bottom">
        <template #activator="{ props }">
            <VBtn width="260" :color="colorRef.value" v-bind="props">
                <p class="p-color">
                    {{ ['Header', 'Body', 'Footer'][index] }} Color <br />
                    <span class="text-uppercase">{{ colorRef.value }}</span>
                </p>
            </VBtn>
        </template>
        <VList>
            <VColorPicker hide-inputs="true" v-model="colorRef.value" />
        </VList>
    </VMenu>
</template>
<script setup>
import { ref } from 'vue'
// 加trim()避免getPropertyValue返回带空格的无效颜色值
const bgColorHeader = getComputedStyle(document.documentElement).getPropertyValue('--custom-color').trim();
const bgColorBody = getComputedStyle(document.documentElement).getPropertyValue('--custom-color-body').trim();
const bgColorFooter = getComputedStyle(document.documentElement).getPropertyValue('--custom-color-footer').trim();

const ColorHeader = ref(bgColorHeader);
const ColorBody = ref(bgColorBody);
const ColorFooter = ref(bgColorFooter);
const selectedColors = ref([ColorHeader, ColorBody, ColorFooter]);
</script>

目标区域代码

<div id="app">
    <div class="app">
        <div class="header" :style="{ backgroundColor: selectedColors[0].value + '!important' }">
            <h1>Header</h1>
        </div>
        <div class="content" :style="{ backgroundColor: selectedColors[1].value + '!important' }">
            <p>This is the main content area.</p>
        </div>
        <div class="footer" :style="{ backgroundColor: selectedColors[2].value + '!important' }">
            <p>Footer</p>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者StRaNgEr