説明がある用語のリストがあります。私はモーダルではなくターム名の直後にこれらの説明を表示する必要があります。私は必要な説明とモーダルを生成し、それをクリックして上の第二の場合に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;
}
}
}
「テンプレートv-for」とは何ですか?コンポーネントのテンプレート名ですか? – LiranC
@LiranC彼はおそらく ''をラッパーとして使用しています:https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt – yuriy636
@ yuriy636、exatly。すべてのものは珍しいと思われますが、私はモーダル以外の記述をどのように印刷するのかは分かりません。元のコードは私のものではないので、私は立ち往生しています。 – MicDB