0

Имеется компонент, например,

<template>
    {{template}}
</template>


<script>
    import cartActions from "../../../../../../templates/components/tooltip-new.twig"


    export default {
      data() {
        return {
        }
      },
      computed: {
        template: function() {
          return cartActions
        }
      },
      mounted() {
        console.log(this.template)
      },
      components: {
        cartActions
      }
    }

в консоль выводится: ƒ (context) { return template.render(context); }

Я не совсем уверенна, что его импортировать именно как компонент. Так же пробовала его заинклюдить прямо в template, но в консоль сразу посыпались ошибки

<template lang="twig">
    {% include "../../../../../../templates/components/tooltip-new.twig" %}
</template>

Uncaught Error: Module build failed: TypeError: Cannot read property 'trim' of undefined

Нужна именно такая реализация, т.к. на всем проект используется twig и только одна страница написана целиком на Vue. Поэтому требуется импортировать некоторые шаблоны прямо твиговские, но пока не совсем понятно как именно это сделать.

1
  • Twig это же php шаблонизатор, vue с таким не работает и в vue компонентах нельзя использовать то что можно в twig. Попробуйте подключить vue компоненты к twig, почитайте как это лучше делать в symfony. 30 июл 2018 в 18:53

1 ответ 1

1

После долгих попыток у меня получилось найти решение. Необходимо становить пакет twig-loader, подключить его в webpack.config.

Далее в компоненте создадим вычисляемое свойство:

template: function() {
      let max_count = 15;
      let isCart = 1;
      let template = require("путь до файла");
      let html = template({requestUrl: (`/product-view?max_count=${max_count}&isCart=${isCart}`),
        maxCount: max_count,
        isCart: isCart
      });
      return html
    }

Далее уже в самом template выведем его через:

<div v-html="template"></div>

Если кому-то интересно, сам твиговский шаблон выглядел следующим образом:

<div {{ selector ?: 'data-static-recommends-ajax-slider' }}
     data-url="{{ requestUrl }}"
     data-max-count="{{ maxCount }}"
     {{ isCart ? 'data-is-cart' : '' }}
     {{ notAvailable ? ' data-not-available' : '' }}>
</div>

Все заработало.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.