Vue.js - data in component instead of a generated modal - vue.js

Question

I have a list of terms that have a description. I need these description to be displayed right after the term name instead of in a modal.
this is the vue component:
Vue.component('taxonomy-list', {
template : ''+
'<span><template v-for="(room, index) in event.terms[tax]">' +
'<template v-if="room.url"><a :href="room.url">{{room.name}}</a></template>' +
//HERE
'<template v-else-if="room.desc">{{room.name}}</template>' +
//END
'<template v-else>{{room.name}}</template>' +
'<template v-if="index !== (event.terms[tax].length - 1)">, </template>' +
'</template></span>' ,
props : [ 'tax', 'options', 'event', ],
methods : {
openModal: function( item, options, $event ){
this.$emit( 'open-modal', item, options, $event );
},
}
});
on the second case on click it generate a modal with the description that i need.
This is the generated modal:
Vue.component( 'modal-taxonomy', {
template: '#wcs_templates_modal--taxonomy',
props: [ 'data', 'options', 'content', 'classes' ],
mixins: [wcs_modal_mixins]
});
<script type="text/x-template" id="wcs_templates_modal--taxonomy">
<div class="wcs-modal" :class="classes" v-on:click="closeModal">
<div class="wcs-modal__box">
<div class="wcs-modal__inner">
<div class="wcs-modal__content wcs-modal__content--full">
<h2 v-html="data.name"></h2>
<div v-html="data.content"></div>
</div>
</div>
</div>
</div>
</script>
I just need to print the "data.content" right after the name of the {{room.name}}, but i cant manage to do so...
Thanks guys.
EDIT: thats the modalOpen function:
openModal: function( data, options ){
var $self = this;
this.data = data;
this.options = options;
if( ! this.visible ){
this.visible = true;
}
this.loading = true;
if( typeof data.start !== 'undefined' ){
if( typeof this.events[data.id] === 'undefined' ){
this.getClass( data.id );
} else {
this.data.content = this.events[data.id].content;
this.data.image = this.events[data.id].image;
this.loading = ! this.loading;
}
} else {
if( typeof this.taxonomies[data.id] === 'undefined' ){
this.getTaxonomy( data.id );
} else {
this.data.content = this.taxonomies[data.id];
this.loading = ! this.loading;
}
}
}

Answer 1

The modal component uses room.content to display the description, but that property is initialised only if you call openModel, see this.data.content = this.events[data.id].content; and this.data.content = this.taxonomies[data.id];.
IMO you have two options, either duplicate the openModel logic into the HTML or create a computed property that returns the description (I'd choose the latter).
EDIT
Actually, a method should be better because you extract the description from room. You'll need something like:
Vue.component('taxonomy-list', {
template : ''+
'<span><template v-for="(room, index) in event.terms[tax]">' +
'<template v-if="room.url"><a :href="room.url">{{room.name}}</a></template>' +
//HERE
'<template v-else-if="room.desc">{{room.name}}</template>' +
//END
'<template v-else>{{room.name}}</template>' +
// DESCRIPTION
'{{ description(room) }}' +
// END
'<template v-if="index !== (event.terms[tax].length - 1)">, </template>' +
'</template></span>' ,
props : [ 'tax', 'options', 'event', ],
methods : {
openModal: function( item, options, $event ){
this.$emit( 'open-modal', item, options, $event );
},
description: function( room ) {
// insert the logic used by openModal to set content here and return that string
// this.events[data.id].content or this.taxonomies[data.id]
return 'description...';
},
},
},
});