Vue3中Axios获取数据后无交互不显示问题求助

问题描述 #

通过Axios从数据库拉取权限数据，在onMounted钩子中已成功获取数据，但使用v-for指令渲染的权限列表不会自动显示，只有触发页面滚动等操作后才会正常渲染。

问题原因 #

代码中permissions是用ref()声明的响应式变量，但赋值时直接替换了整个ref对象：

permissions = data.permissions

这种写法会丢失响应性——Vue3的ref需要通过.value属性修改内部值才能触发视图更新，直接赋值会把原本的响应式ref对象变成普通数组，导致Vue无法追踪其变化。

修复方案 #

修改赋值逻辑，通过.value更新ref的内部值：

permissions.value = data.permissions

保持permissions的响应性后，数据获取会自动触发视图渲染，无需手动触发页面操作。

修复后的完整代码 #

<script setup>
import {requiredValidator} from '@validators'
import {onMounted, ref} from "vue";
import axios from '@axios'

const {t} = useI18n()
const route = useRoute()
const name = ref('')
const tag = ref('')
const checkbox = ref(false)
let permissions = ref([])
let selectedPermissions = ref([])

onMounted(async () => {
    try {
        const {data} = await axios.get('/api/users/roles/role-permissions')
        // 修复：通过.value更新响应式变量
        permissions.value = data.permissions
    } catch (e) {
        console.log(e)
    }
});
</script>

<template>
    <VCard>
        <VCardTitle>
            Rol Ekle
        </VCardTitle>
        <VCardText>
            <VForm class="mt-5">
                <VRow>
                    <VCol
                        cols="12"
                        md="6"
                    >
                        <VTextField
                            v-model="name"
                            label="Rol Parent"
                            placeholder="super-admin"
                            :rules="[requiredValidator]"
                        />
                    </VCol>
                    <VCol
                        cols="12"
                        md="6"
                    >
                        <VTextField
                            v-model="tag"
                            label="Rol Adı"
                            placeholder="Süper Yönetici"
                        />
                    </VCol>
                    <VCol
                        cols="12"
                        md="12"
                    >
                        <h3>Yetkiler</h3>
                    </VCol>
                    <VCol
                        v-for="(perm, index) in permissions" :key="perm.id"
                        cols="12"
                        md="3"
                    >
                        <VCheckbox
                            :label="perm.value"
                            :value="perm.id"
                            v-model="selectedPermissions"
                        />
                    </VCol>
                    <VCheckbox
                        label="perm.value"
                        value="perm.id"
                    />

                    <VCol
                        cols="12"
                        class="d-flex gap-4"
                    >
                        <VBtn type="submit">
                            Ekle
                        </VBtn>

                        <VBtn
                            type="reset"
                            color="warning"
                            variant="tonal"
                        >
                            Sıfırla
                        </VBtn>

                        <VBtn
                            to="/roles"
                            color="secondary"
                            variant="tonal"
                        >
                            Geri Dön
                        </VBtn>
                    </VCol>
                </VRow>
            </VForm>
        </VCardText>
    </VCard>
</template>

<route lang="yaml">
meta:
    action: create
    subject: roles
</route>

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