I'm in the process of developing a settings page for a project. This particular page is based on HTML and utilizes JSON to store data, with Vue 3 being used to display the information on the page. However, I've encountered an issue where the data is being gathered correctly, but Vue isn't replacing the variables as expected. Is there something wrong with my approach?
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Settings</title>
<link href='./favicon.ico' rel='icon'>
<script src="scripts/vue.js"></script>
</head>
<body>
<div id="settings">
<span>Background: {{ background }}</span><br />
<span>Columns: {{ columns }}</span><br />
<span>Group:</span><br/>
<span>Width: {{ group_width }}</span><br/>
<span>Color: {{ group_color }}</span>
</div>
<script src="scripts/settings.js" type="text/javascript, module"></script>
</body>
</html>
settings.js:
import Vue from './vue';
var request = new XMLHttpRequest();
var settings_object;
request.open('GET', 'data/settings.json', true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
settings_object = JSON.parse(request.responseText);
var bgval = settings_object.background;
var cval = settings_object.columns;
var gwval = settings_object.group.width;
var gcval = settings_object.group.color;
// Used exclusively for testing the collection of data.
alert('Background: ' + bgval + '\n' +
'Columns: ' + cval + '\n' +
'group_width' + gwval);
new Vue({
el: '#settings',
data: {
background: bgval,
columns: cval,
group_width: gwval,
group_color: gcval,
},
});
}
};
settings.json:
{
"background": "connected_dots",
"columns": 2,
"group": {
"width": 3,
"color": "custom"
}
}