Как обратиться к динамически созданному vue компоненту?

Question

[Andrej Sharapov]

Собственно сабж.

Создал vue компонент и завернул его в динамически созданный объект. Нужно, чтобы блок выводился только при разрешении >768px. Скрипт работает, но когда я ввожу данные объекта, перестает работать -__-. Подскажите, где ошибка?

(function () {

    Vue.component('footer-bar', {
        template: `
        <div id="footer-bar">
            This block nav
        </div>
        `
    })

    const bar = document.createElement('div');
    bar.id = 'navbar';
    const body = document.body;
    body.appendChild(bar);

    new Vue({
        el: '#navbar',
        template: `
        <div id="navbar">
            <footer-bar></footer-bar>
        </div>
        `
    })

    function smallMedia(sm) {
        if (sm.matches) {
            bar.style.display = "block";
        } else {
            bar.style.display = "none";
        }
    }

    const mqSm = window.matchMedia("(min-width: 768px)");
    smallMedia(mqSm);
    mqSm.addListener(smallMedia);

})();

Comments

[Ярослав Иванов]

Ну нафига мешать вью и нативный js?? document.createElement('div');
bar.id = 'navbar'; че это за х***я?
Фреймворк даёт тебе архитектуру а ты её нахер шлёшь и лепешь свое.

[Andrej Sharapov]

Ярослав Иванов, я пока только осваиваю vue) не подскажете как упростить? )
И ссылку если можно, в какое место смотреть.

[Ярослав Иванов]

Andrej Sharapov, дело не в упрощении а в самом подходе. Не нужны никакие createElement и все такое. Я не смогу отписать в двух словах документацию. У вью документация сама за себя скажет. Там прекрасное вступление про основы, директивы, проксирование и т.д.

[jeruthadam]

Andrej Sharapov, начни с осваивания CSS лол. Зачем тут JS вообще?

[Andrej Sharapov]

jeruthadam, а при чем тут это? Через css я его и так могу вызвать чекбоксом. Но хочу реализовать именно через js, не создавая в стилях и html. Мы не ищем легких путей))

Answer 1

[Planet_93]

Для решения подобных проблем в CSS есть свойство media:

@media screen and (max-width:350px) {
    .object {
        display: none;
    }
}

Comments

[Andrej Sharapov]

Знаю, спасибо. Пробую сделать это именно через js)

Answer 2

[Andrej Sharapov]

Решил. Создал новую переменную const db = document.getElementById('navbar'); все заработало.

Comments

[Ярослав Иванов]

Правильно. Нужно больше костылей.

[Andrej Sharapov]

Ярослав Иванов, как смог) знаний vue пока мало