@litash

Как Vue.js заставить понимать jQuery, JS при переключении между компонентами?

Простите за такую формулировку вопроса. Учу Vue.js да и сам JS понимаю туго). Есть учебный проект, который я по тихому делаю, в общем проблема такая. Есть компоненты и переключение между ними, если в компонент я вставлю кнопку и пишу jQuery код для изменения текста в ней (к примеру) то когда я переключаюсь во второй компонент и обратно то кнопка уже не работает. Я так понимаю при переключении между компонентами Vue вновь рисует этот компонент но скрипт для контента внутри него уже не видит. Пробывал keep-alive но не помогает. Вариант без компонентов используя только v-show не подходит. Как заставить Vue, понимать чистый js и левые библиотеки даже при переключении между ними? Гуглил и пробывал вставить в mounted jQuery код но результата не было. Объясните пожалуйста почему так либо вообще не использовать Vue для такого ?

Переключение реализовано с тегом
component(
v-if="selected"
v-bind:is="selected"
)

template и массив с данными.
  • Вопрос задан
  • 1013 просмотров
Решения вопроса 1
@askhat
Дело в том, что когда selected возвращает ложь, элемент удаляется из древа DOM и, следовательно, перестаёт работать jquery плагин инициализированный на нём. Чтобы это избежать, необходимо научиться понимать жизненный цикл Vue компонента. К тому же следует выделять код работающий с DOM но не являющийся неотъемлемой частью компонента в директивы. Например (для однофайловых компонентов):
<template>
  <div v-fancy-plugin="{ argumentObjectKey: 'value' }"></div>
</template>
<script>
import $ from 'jquery'
import fancyPlugin from 'fancy-plugin'

export default {
  directives: {
    fancyPlugin: {
      inserted (element, argumentObject) {
        $(element).fancyPluginInit(argumentObject)
      }
    }
}
</script>

Таким образом jquery код будет инициализирован в момент помещения элемента в DOM древо.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Выкинуть jq.
Практически нет задач, которые решает jquery, но не решает vuejs в то же или меньшее количество кода. Исключение могут составлять всякие готовые компоненты типа календарей, но и их нарисовать/найти готовый для vue не так сложно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы