Vue.js - 組件中的數據而不是生成的模式

Question

我有一個包含說明的術語列表。我需要將這些描述顯示在術語名稱的後面，而不是模式中。

這是VUE部件：上點擊它產生與我需要描述一個模態的第二殼體

 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"><a href="#" class="wcs-modal-call" v-on:click="openModal(room, options, $event)">{{room.name}}</a></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); 
      }, 
      } 
     }); 

。

這是生成模式：

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"> 
       <a href="#" class="wcs-modal__close ti-close" v-on:click="closeModal"></a> 
       <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> 

我只是需要的名字後立即打印「data.content的」 {{room.name}}，但我不能管理這樣做。 ..

謝謝你們。

編輯：多數民衆贊成在modalOpen功能：

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; 
      } 
     } 
    }