2017-10-18 13 views
0

説明がある用語のリストがあります。私はモーダルではなくターム名の直後にこれらの説明を表示する必要があります。私は必要な説明とモーダルを生成し、それをクリックして上の第二の場合にVue.js - 生成されたモーダルではなくコンポーネント内のデータ

 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コンポーネントです。

これが発生したモーダルである:

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> 

私はちょうど右の{{room.name}}の名前の後に「data.content」を印刷する必要があるが、私はそうすることを管理するカント。 ..

ありがとうございます。

EDITは:modalOpen機能のthats:

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

「テンプレートv-for」とは何ですか?コンポーネントのテンプレート名ですか? – LiranC

+1

@LiranC彼はおそらく '