Vue 3 onMounted in prod not updating reactive data (works in dev)

Viewed 901

Consider this component:

<template>
    <div>
        <div>{{show_data}}</div>
        <div v-for="(item, i) in show_data.list" :key="i">{{item.name}}</div>
    </div>
</template>
<script>
import {onMounted} from "vue"
import {reactive} from "@vue/reactivity"

export default {
    props: {
        definitions: Array
    },
    setup(props) {
        const show_data = reactive({
            list: []
        })

        onMounted(() => {
            props.definitions.forEach(definition => {
                console.log(definition)
                show_data.list.push({name: definition.title, contact: definition.phone_number})
                console.log('show_data so far:')
                console.log(show_data)
            })
        })

        return {
            show_data,
        }
    }
}
</script>

When above code is running in npm run dev, everything executes properly and data populates. But when run in npm run prod data comes in, I can see console.log() showing each definition, and showing full show_data with the actual pushed content, but the actual render does not collect it, the {{show_data.list}} always shows [] and using v-for to iterate through it is also empty. Again, in dev all this works as intended.

1 Answers

Maybe you rendered before the onMounted is executed. Render with v-if condition

<template>
<div v-if="show_data.list.lenght > 0">
    <div>{{show_data}}</div>
        <div v-for="(item, i) in show_data.list" :key="i"> 
              {{item.name}}
        </div>
</div>
</template

Hope it works for you !

Related