Question

我采用了此代码，并了解它不是典型的.vue文件格式。它在运行其他Vue代码的WebSphere Portlet中运行。

第一级组件加载得很好（greeting-portlet-text），但是嵌套的组件（greeting-portlet-buttons）似乎被完全忽略了。我最近添加了一个使用与该文件中其他组件相同的格式的文件。我很困惑为什么它不起作用。

Vue.component('greeting-portlet-text', {
  data: function() {
    return {
      today: ''
    };
  },
  methods: {
    getFormattedTodaysDate: function() {
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1; //January is 0!
      var yyyy = today.getFullYear();
      today = mm + '/' + dd + '/' + yyyy;
      return today;
    }
  },
  mounted: function() {
    this.today = this.getFormattedTodaysDate();
  },
  template:
    '<div class="greeting-text"><h1>Welcome ' +
    _greentin_app_config.user.firstName +
    '</h1>' +
    '  <div class="greeting-buttons greeting-buttons-top show-for-large">' + 
    '    <greeting-portlet-buttons></greeting-portlet-buttons>' +
    '  </div>' +
    '</div>'
});

Vue.component('greeting-portlet-buttons', {
    data: function() {
        return {
              SmartDriveLink: '/wps/myportal/k/payroll/bonus',
              SmartDriveScore: 4
            };
    },
    template:
          '    <a v-if="SmartDriveScore>=25 && SmartDriveScore!=99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--red-A700 mdl-color-text--white">SmartDrive Score:&nbsp;&nbsp; {{SmartDriveScore}}&nbsp;&nbsp;&nbsp;&nbsp;<i class="material-icons">thumb_down_alt</i></a>' +
          '    <a v-if="SmartDriveScore=== 99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--yellow">SmartDrive Score:&nbsp;&nbsp;<i class="material-icons">phone_in_talk</i>&nbsp;&nbsp;CALL DDM</a>' + 
          '    <a v-if="SmartDriveScore<25" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--green mdl-color-text--white">SmartDrive Score:&nbsp;&nbsp; {{SmartDriveScore}}&nbsp;&nbsp;&nbsp;&nbsp;<i class="material-icons">thumb_up_alt</i></a>'
});

(window.onload = function() {
  new Vue({
    el: targetEl,
    template:
      '<div class="greeting-portlet">' +
      '    <div class="grid-x grid-margin-x">' +
      '        <div class="cell small-12 large-5"><greeting-portlet-text></greeting-portlet-text></div>' +
      '    </div>' +
      '</div>'
  });
})

我尝试了各种方法，例如为问候-portlet-按钮分配名称属性，将其作为外部组件中的组件对象添加，到目前为止，没有任何效果。

这是真的很旧的方法吗？或者这对于Vue和WebSphere是典型的？

Answer 1

您必须将greeting-portlet-buttons组件的模板包装到根元素中。这是组件模板所必需的。

Vue.component('greeting-portlet-text', {
  data: function() {
    return {
      today: ''
    };
  },
  methods: {
    getFormattedTodaysDate: function() {
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1; //January is 0!
      var yyyy = today.getFullYear();
      today = mm + '/' + dd + '/' + yyyy;
      return today;
    }
  },
  mounted: function() {
    this.today = this.getFormattedTodaysDate();
  },
  template:
    '<div class="greeting-text"><h1>Welcome ' +

    // Max: looks like this is an external variable
    '_greentin_app_config.user.firstName' +

    '</h1>' +
    '  <div class="greeting-buttons greeting-buttons-top show-for-large">' + 
    '    <greeting-portlet-buttons></greeting-portlet-buttons>' +
    '  </div>' +
    '</div>'
});

Vue.component('greeting-portlet-buttons', {
    data: function() {
        return {
              SmartDriveLink: '/wps/myportal/k/payroll/bonus',
              SmartDriveScore: 4
            };
    },
    template:

          // Max: I've added <div> as root element
    	  '<div>'+
          '    <a v-if="SmartDriveScore>=25 && SmartDriveScore!=99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--red-A700 mdl-color-text--white">SmartDrive Score:&nbsp;&nbsp; {{SmartDriveScore}}&nbsp;&nbsp;&nbsp;&nbsp;<i class="material-icons">thumb_down_alt</i></a>' +
          '    <a v-if="SmartDriveScore=== 99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--yellow">SmartDrive Score:&nbsp;&nbsp;<i class="material-icons">phone_in_talk</i>&nbsp;&nbsp;CALL DDM</a>' + 
          '    <a v-if="SmartDriveScore<25" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--green mdl-color-text--white">SmartDrive Score:&nbsp;&nbsp; {{SmartDriveScore}}&nbsp;&nbsp;&nbsp;&nbsp;<i class="material-icons">thumb_up_alt</i></a>' +
          '</div>'
});


(window.onload = function() {
  new Vue({
    el: document.getElementById('app'),
    template:
      '<div class="greeting-portlet">' +
      '    <div class="grid-x grid-margin-x">' +
      '        <div class="cell small-12 large-5"><greeting-portlet-text></greeting-portlet-text></div>' +
      '    </div>' +
      '</div>'
  });
})

<script src="https://unpkg.com/vue"></script>

<div id="app"></div>

嵌套的Vue组件不显示

1 个答案: