I came across this question, but I'm still struggling to understand the best approach to handling forms in Electron. I am currently using the code snippet below and aiming to utilize dexie.js to store the form data upon submission. However, I'm facing challenges in retrieving the data when using Vue.
The code in my main process file looks like this:
// main.js
const electron = require('electron');
const { app, BrowserWindow, ipcMain } = electron;
function createWindow(){
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
ipcMain.on('submitForm', function(event, data) {
// Access form data here
console.log(data);
});
Here is the code used in my renderer:
// renderer.js
const ipcRenderer = require('electron').ipcRenderer;
const Dexie = require('dexie');
// Enabling debug mode to get async stacks from exceptions.
Dexie.debug = true; // For production, set to false for better performance.
let db = new Dexie('clients');
db.version(1).stores({
websites: "++id,client_name,hosting_provider,website_domain,panel_user,panel_pwd,db_host,db_name,db_user,db_pwd,wp_user,wp_pwd"
});
$(document).ready(function(){
var myapp = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
submitForm(){
ipcRenderer.send('submitForm', formData);
}
}
});
console.log(myapp);
});
And this is the HTML defining the UI:
<!-- index.html -->
<div class="container-fluid p-4" id="app">
<div class="row">
<div class="col-8 card p-4">
<form id="client-info" v-on:submit.prevent="submitForm()">
<div class="form-row">
<div class="col-12">
<h4>Client Information</h4>
</div>
<div class="col-6">
<label for="">Client:</label>
<input type="text" class="form-control" id="client-name" name="client_name" placeholder="">
</div>
<!-- More form fields omitted for brevity -->
<button type="submit" class="btn btn-success">SAVE</button>
</div>
</form>
</div>
<div class="col-4">
<ul class="nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">{{ message }}</a>
</li>
</ul>
</div>
</div>
</div>
<script src="renderer.js"></script>
Note: I intend for the col-4 section to display a list of clients' names, which align with the form data, sourced from my dexie.js database.