1

Доброго времени. Есть сайт написанный на backbone и появилась задача расширить его функционал. Новый функционал - это достаточно объёмное модальное окно с множеством параметров и шагов.

Появилась идея использовать для данной части vuejs, но есть несколько вопросов по интеграции:

  1. Как интегрировать vuejs только для определённой части сайта?
  2. Если интеграция прошла успешно то получается, что vue следит за определённым куском DOM'a, и из этого выходит другой вопрос: этот кусок - это и есть модальное окно, но как выполнить его показ методами обычного js? (те как при нажатии кнопки где угодно на сайте запустить работу блока модалки под управлением vue?)

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

Хотелось бы всё таки использовать npm webpack и тд.

Подскажите пожалуйста как бы вы подошли к решению такой задачи? Я немножко запутался и мне сложно понять как это сделать.

6
  • работать с vue через DOM - не лучшая идея. А что мешает работать с vue с вебпаком? Написать свой кастомный элемент и добавить его в DOM? Если вопрос именно про сео и контент, который внутри блока, должен дружить с сео, то почитайте про серверный рендеринг 29 янв 2018 в 8:43
  • Как раз этот блок не обязан дружить с СЕО, по этому и был выбран vue. Я не очень понимаю как после внедрения этого кастомного элемента в ДОМ заставить его работать при каком то действии пользователя. 29 янв 2018 в 8:47
  • Такс. А в чем конкретно проблема? Что будет мешать vue работать, что его условные операторы и методы не будут выполняться? 29 янв 2018 в 8:50
  • Смотрите, допустим мы привязали vue к какому-то участку ДОМа (el: '#modal) и там вся логика этого модального окна, и есть кнопка которая лежит вне #modal и получается что vue не следит за этой кнопкой. Вопрос: как при нажатии этой кнопки запустить логику компонента vue (допустим смену класса "show" внутри компонента modal)? 29 янв 2018 в 8:56
  • Сейчас нашел похожий вопрос но увы, верного ответа там нет - laracasts.com/discuss/channels/vue/… 29 янв 2018 в 11:33

1 ответ 1

1

Кажется я нашел решение: корневой компонент кладём в window

window.modal = new Vue({
  el: '#app',
  data: {
    test: "test"
  },
  template: '<div>{{test}}<div>'
})

И теперь можно вызывать всё что угодно из window.modal (например window.modal.test = "hello"). Теперь я спокойно могу менять данный в компоненте vue, из любого другого места на странице.

Скажите: хорош ли такой подход?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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