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