Weird VueJS error on settings form


#1

Hi all,

I’ve got a strange error on my VueJS form. The form / page itself works, but I’m getting console errors. It’s a simple settings page for my app, at the moment nothing too complicated. Here is the settings.vue component:


	<div class="dashboard-settings">
        <div class="container-fluid">
            <h3>Settings</h3>

            <form class="settings-form">

                <div class="row">
                    <div class="col-md-12">

                        <div class="form-group">
                            <label for="name">Community Name</label>
                            <input class="form-control" type="text" v-model="this.settings.appName" placeholder="Website Name" />
                        </div>

                        <div class="form-group">
                            <label for="logo">Logo</label>
                            <input class="form-control" type="text" v-model="this.settings.appLogo" placeholder="Website logo URL" />
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" v-on:click="submitSettings">Submit</button>
                        </div>

                    </div>
                </div>

            </form>

        </div>
	</div>

</template>

<script>

// Imports
import sanitizeHtml from 'sanitize-html';

// Settings db
import Settings from '/imports/api/settings';

export default {
    data() {
        return {
            settings: {}
        }
    },

    meteor: {
        $subscribe: {
            'settings': {}
        },

        settings() {
            return Settings.findOne();
        }
    },

    methods: {
        submitSettings: function( event ) {

            event.preventDefault();

            const clanName = sanitizeHtml( this.settings.appName );
            const clanLogo = sanitizeHtml( this.settings.appLogo );

            settings = {
                id: this.settings._id,
                name: clanName,
                logo: clanLogo
            }

            Meteor.call( 'updateSettings', settings, (err) => {
                if( err ) {
                    console.log( err );
                } else {
                    console.log( 'Settings Updated' );
                }
            });
        }
    },

	metaInfo: {
    title: 'Settings', // set a title
    titleTemplate: '%s | Website name', 
    htmlAttrs: {
        lang: 'en',
        amp: undefined // "amp" has no value
    },
    meta: [
        { charset: 'utf-8' },
        { description: 'Settings' },
        { property: 'og:description', content: 'Settings' }
    ]
    },

	name: 'settings'
}

</script>

And here is the console error:
[Vue warn]: Error in render: "TypeError: Cannot read property 'appName' of undefined"
and
TypeError: Cannot read property 'appName' of undefined

Note, by default the Settings collection has some dummy data. And the form is being populated with the settings data without issue (and the form is being processed fine too!). I think it’s throwing the error before the data has loaded, but I’m not 100% sure how to get around it.

Any help would be greatly appreciated!

Cheers :slight_smile:


#2

I had this before, The subscription hasn’t arrived before rendering the page. It expects a value but it is not defined yet.

You can either delay the rendering of the page until the subscriptions have arrived or define “appName” as an empty string and let the value change reactively as the data arrive.


#3

Yeah I suspected as much and I’ll do something like that.

I’ll look at introducing a loading component too I think. It makes sense to check that the sub is ready according to the docs from @akryum.

Cheers!