title: Vue.js - data in component instead of a generated modal
body: <p>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.</p>
  
  <p>this is the vue component:</p>
  
  <pre><code>      Vue.component('taxonomy-list', {
            template : ''+
              '&lt;span&gt;&lt;template v-for="(room, index) in event.terms[tax]"&gt;' +
                '&lt;template v-if="room.url"&gt;&lt;a :href="room.url"&gt;{{room.name}}&lt;/a&gt;&lt;/template&gt;' +
  //HERE
                '&lt;template v-else-if="room.desc"&gt;&lt;a href="#" class="wcs-modal-call" v-on:click="openModal( room, options, $event )"&gt;{{room.name}}&lt;/a&gt;&lt;/template&gt;' +
  //END
                '&lt;template v-else&gt;{{room.name}}&lt;/template&gt;' +
                '&lt;template v-if="index !== (event.terms[tax].length - 1)"&gt;, &lt;/template&gt;' +
              '&lt;/template&gt;&lt;/span&gt;' ,
            props    : [ 'tax', 'options', 'event', ],
            methods  : {
              openModal: function( item, options, $event ){
                this.$emit( 'open-modal', item, options, $event );
              },
            }
          });
  </code></pre>
  
  <p>on the second case on click it generate a modal with the description that i need.</p>
  
  <p>This is the generated modal:</p>
  
  <pre><code>Vue.component( 'modal-taxonomy', {
    template: '#wcs_templates_modal--taxonomy',
      props: [ 'data', 'options', 'content', 'classes' ],
      mixins: [wcs_modal_mixins]
  });    
  
  &lt;script type="text/x-template" id="wcs_templates_modal--taxonomy"&gt;
      &lt;div class="wcs-modal" :class="classes" v-on:click="closeModal"&gt;
          &lt;div class="wcs-modal__box"&gt;
              &lt;div class="wcs-modal__inner"&gt;
                  &lt;a href="#" class="wcs-modal__close ti-close" v-on:click="closeModal"&gt;&lt;/a&gt;
                  &lt;div class="wcs-modal__content wcs-modal__content--full"&gt;
                      &lt;h2 v-html="data.name"&gt;&lt;/h2&gt;
                      &lt;div v-html="data.content"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I just need to print the "data.content" right after the name of the {{room.name}}, but i cant manage to do so...</p>
  
  <p>Thanks guys.</p>
  
  <p>EDIT: thats the modalOpen function:</p>
  
  <pre><code>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;
              }
          }
      }
  </code></pre>