Как подключить Vue3 к Bitrix шаблону компонента и вывести рекурсивный список?

Question

[photosho]

Подключил Vue к шаблону компонента в Bitrix. В template.php располагается div#app, к которому подключается Vue через CreateApp(). Скрипт находится в файле vue.js, подключаемом внутри template.php. Всё работает хорошо, но появилась необходимость вывести рекурсивный список (хранится в памяти в виде объекта со вложенными объектами). Не знаю, как это сделать без использования компонентов Vue. Подскажите:

1. Как при таком подходе можно создать и подключить компонент Vue? Можно ли написать разметку компонента в самом template.php и подключить его как компонент оттуда? Например, через ob_start() в переменную, передать эту переменную в JS и в vue.js взять шаблон компонента оттуда.

либо,

2. Есть ли способ вывести рекурсивный объект без дополнительного компонента?

Answer 1

[Aetae]

Я так понял до сих пор вы использовали vue вообще без компонентов - что есть в шаблоне - то и рисуется. Таким образом вы теряете 99% пользы и удобства vue.

Конечно же можно создать в tamplate компонент, прямо там его добавить в vue и горя не знать.

Просто делаешь рекурсивный компонент:

var RecursiveComponent = {
  name: 'recursive-component',
  props: ['i'],
  setup() {
    const open = ref(false)
    return { open }
  },
  template: `
    <div>
      <recursive-component v-if="open" :i="i ? i+1 : 1"></recursive-component>
      <button @click="open=!open">toggle {{i}}</button>
    </div>
  `
}

И просто его используешь:

Vue.createApp({
  components: { RecursiveComponent },
  setup() {
    return {
      message: 'Привет Vue!'
    }
  }
}).mount('#app');

<div id="app">
  {{ message }}
  <recursive-component></recursive-component>
</div>

P.S. Теоретически вместо строки в template вы действительно можете забуфферизировать вывод через ob_start, положить в переменную, а потом эту переменную положить в template. Но насколько я помню в битриксе не всё так просто с буферизацией и не факт что оно заработает и ничего не сломает...