Вложенный компонент Vue не отображается

Question

Я принял этот код и понимаю, что это не типичный формат файла .vue. Он запускается внутри портлета WebSphere, в котором выполняется другой код Vue.

Компонент первого уровня загружается очень хорошо (текст-приветствия-портлета), но вложенный (кнопки-приветствия-портлета), похоже, полностью игнорируется. Я недавно добавил, что используется тот же формат, что и другие компоненты в этом файле. Я озадачен, почему это не работает.

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

Я пробовал разные вещи, такие как назначение свойства name для кнопок приветствия-портлета, добавление его в качестве объекта компонентов во внешний компонент, и пока ничего не работает.

Это действительно старый способ сделать это или это типично для 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>