Estoy diseñando una página de configuración para un proyecto. La página es HTML. Estoy usando JSON para almacenar datos, y VUE 3 presentará los datos a la página. El problema que tengo es que se recopilan los datos, pero Vue no está reemplazando las variables. ¿Estoy haciendo algo mal?

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/>
            &nbsp;&nbsp;&nbsp;<span>Width: {{ group_width }}</span><br/>
            &nbsp;&nbsp;&nbsp;<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 colloction 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"
    }
}
0
TheCodeGeek 30 may. 2021 a las 04:45

1 respuesta

La mejor respuesta

@Lawrence cherone tiene razón, la necesidad de XMLHTTTPRequest () debe estar dentro del gancho como creado () o montado (). Después de la llamada XHR, asigne valores del gancho por:

this.yourVariableDefinedInData = value.

Nota la

.bind(this) 

Es necesario tener correcto "esto" en el alcance de

request.onreadystatechange = function () {

Esto debería funcionar:

var vueMain = new Vue({
    el: '#vue-main',
    data: {
        background: '',
        columns: '',
        group_width: '',
        group_color: '',
    },
    computed: {
        field0: function(){
            var classCss = 'field margin-mobile-fix';
            if (this.expandBaseData===false){
                classCss += ' hidden';
                // vueMenu.menuVisible=false;
            }else{
                classCss +=" opacity0 hidden-show";
                // vueMenu.menuVisible=true;
            }
            return classCss;
        },
    },
    mounted() {
            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);
                    this.bgval = settings_object.background;
                    this.cval = settings_object.columns;
                    this.gwval = settings_object.group.width;
                    this.gcval = settings_object.group.color;
                    alert('Background: ' + this.bgval + '\n' +
                    'Columns: ' + this.cval + '\n' +
                    'group_width' + this.gwval);
                }
            }.bind(this)
}
})
0
Jerzy 30 may. 2021 a las 04:36