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>

我只需要打印＆＃34; data.content＆＃34;就在{{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;
            }
        }
    }

Answer 1

模态组件使用room.content来显示说明，但只有在您致电openModel时才会初始化该属性，请参阅this.data.content = this.events[data.id].content;和this.data.content = this.taxonomies[data.id];。

IMO你有两个选择，要么将openModel逻辑复制到HTML中，要么创建一个返回描述的计算属性（我选择后者）。

修改

实际上，方法应该更好，因为您从room中提取描述。你需要这样的东西：

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>' +
// 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...';
        },
      },
   },
});

Vue.js - 组件中的数据而不是生成的模态

1 个答案: