Electron app with Vue 3. Ubuntu 24.04 Chrome/98.0.4758.141 Electron/17.4.7 node v23.5.0 @vue/cli 5.0.8 vue@3.5.13
It reads a file from local disk and loads it into a reactive variable in Vue 3 so I can display data from it in the UI.
In the code below, the file contents is successfully read by the main process and is returned in the callback within the window.api.receive("fromMain" function. The console.log shows the expected contents of the file as a json string and is working as expected.
The problem I have is in the rendered template, the {{ pdata }} renders as "22222222", but I expect it to render as the text in the data variable, since the callback will get called after the 22222222 assignment.
Why doesn't this work? And what is the correct way to get it to work?
What I've tried:
- Using reactive() instead of ref()
- Using Object.assign() instead of =
App.vue:
<script setup>
import { ref } from 'vue'
let pdata = ref("1111111111")
pdata = "22222222"
window.api.receive("fromMain", (data) => {
console.log(Received ${data})
pdata = data
})
// This triggers the file read in main
window.api.send("toMain", "some data")
</script>
<template>
{{ pdata }}
</template>