I've encountered issues updating data in my Vue application after an AJAX callback. I have previously resolved similar problems by using Vue.set, but for some reason, it's not working for me today.
The only difference is that I am calling a service within a component (.vue file).
When I inspect the DOM with VueJS tools in Chrome, I can see the data from the service being assigned to my module.options property in the created function, but it's not rendering on screen.
Below is the full .vue component and a screenshot showing the data logged in the dev tools and the template not rendering it.
The snippet provided won't run, but it's a nicer format than pasting it directly into the post.
To summarize, the response from
this.build_service.getOptionsForModuleVue.set( this.module, 'options', res.options )Any thoughts on why this might be happening?
<template>
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title">
<a data-toggle="collapse" :href="'#collapse' + module.field" :data-parent="'#' + group_name" >
{{module.title}}
[{{module.options.length}}]
</a>
</h2>
</div>
<div :id="'collapse' + module.field" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
{{module}}
<select id="" data-target="#" class="form-control" :disabled="!module.is_active">
<option :value="{}">Select {{module.title}}...</option>
<option v-for="option in module.options" :value="option" v-html="option.name">
</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-success mediumButton" @click="create( module )">
Create
</button>
<button class="btn btn-primary mediumButton" @click="edit( module )">
Edit
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { EventBus } from '../event-bus.js';
var BuildService = require('../services/build-service');
export default {
name: 'module',
props: [ 'group_name', 'module' ],
data: function() {
return {
}
},
created: function() {
console.log('single module component created');
this.build_service = new BuildService();
console.log( this.module );
// if there are no options, load from service
if( !this.module.options.length && this.module.parent === '' ) {
this.build_service.getOptionsForModule( this.module )
.then(( res ) => {
if( res.length ) {
res = res[ 0 ];
Vue.delete(
this.module,
'options'
);
Vue.set(
this.module,
'options',
res.options
);
} else {
console.error('no options found');
// TODO: status alert
}
})
.catch(function(err){
console.error(err);
});
}
},
methods: {
create: function( module ) {
console.log('creating record for', module);
},
edit: function( module ) {
console.log('editing', module);
}
}
}
</script>