Как запустить $ ('. Button-collapse'). SideNav ('hide'); в vuejs 2 без jQuery?

Я успешно добавлен следующий код, который дает мне sideNav из материализовать:

<v-btn-link v-side-nav:side-nav="nav" class="button-collapse btn-flat" id="btn-side-menu"><i class="material-icons">menu</i></v-btn-link> 
<v-side-nav id="side-nav" class="hide-on-small"> 
    <a v-on:click="handleNavDashboard()">Dashboard</a> 
    <a v-on:click="handleLogout()">Logout</a> 
</v-side-nav>

и я использую следующие методы:

methods: { 
    handleLogout() { 
     console.log('LOGGED OUT') 
     this.$store.dispatch('clearAuthUser') 
     window.localStorage.removeItem('authUser') 
     this.$router.push({name: 'login'}) 
    }, 
    handleNavDashboard() { 
     console.log('GOING DASHBOARD') 
     console.log(this) 
     this.$router.push({name: 'dashboard'}) 
    } 
    }

так, когда я нахожусь на домашней странице и я нажимаю Панель инструментов, я получаю содержимое панели мониторинга на экране, но меню sideNav и затемненный фон все еще присутствуют. Материализовать-CSS говорит, что вы можете использовать эту функцию

$('.button-collapse').sideNav('hide');

, чтобы скрыть его progmatically, но у меня нет JQuery установлен. Как сбросить sideNav после нажатия кнопки навигации?

источник

2017-01-04 khany

Похоже, материализовать-CSS зависит от JQuery – Nora

Вы можете найти 'Vue' версию полезно: http://johnleider.com/vue-materials-docs/ –

@craig_h Это та версия, которую я использую. Я также пытаюсь использовать другие ответы SO, чтобы заставить jQuery работать в моем приложении, но там не повезло. – khany

CDN

От материализовать документы:

последнее, что следует отметить, что вы должны импортировать JQuery, прежде чем импортирующих materialize.js!

<body> 
    <!--Import jQuery before materialize.js--> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="js/materialize.min.js"></script> 
</body>

NPM

гораздо лучше, установить JQuery через НПМ:

npm install jquery

и использовать WebPack ProvidePlugin сделать JQuery глобальный модуль доступен во всех ваших файлов
здесь представляет собой образец webpack.config.js файл

new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery", 
    "window.jQuery": "jquery" 
})

В Vue.JS DOM манипуляции инкапсулируются внутри директивы, вы можете использовать директивы условного рендеринга v-if или v-show, чтобы сделать эту работу без использования JQuery:

jsFiddle example

Также проверьте структуру компонентов Vuetify.js, которые обеспечивают чистые, семантические и повторно используемых компонентов.

источник

2017-01-04 13:26:47

@ t-dom93 гений! Никогда не думал писать свою собственную навигацию, но теперь у меня есть. Это грубо, но выполняет эту работу. Спасибо за вдохновение. – khany

Рад помочь вам! Пожалуйста, подумайте о том, чтобы принять ответ, если это было полезно для вас. благодаря –

Если вы хотите включить jQuery в к проекту, который использует requires или imports, то вам необходимо убедиться, что он required и не включали использование script тегов, потому что это будет за рамки скомпилированного кода (если не него был подкладками), поэтому добавьте следующую строку в ваш проект:

ES6 синтаксис:

import jQuery from 'jquery'; 
window.$ = window.jQuery = jQuery

ES5 Синтаксис:

window.$ = window.jQuery = require('jquery');

И убедитесь, что вы установили JQuery:

npm install jquery --save-dev

Это ставит jQuery в глобальную область видимости, поэтому он может быть использован сайт широко. Документы для этого пакета на самом деле не так понятны, и по какой-то причине они не упоминают, что jQuery является зависимостью, но, глядя на код, он явно предназначен для некоторых компонентов.

источник

2017-01-04 12:55:56

Если вы не хотите использовать JQuery и материализовать, вы можете использовать директиву :v-show="showAside" или :v-if="showAside" со свойством, как showAside (в данных) и обрабатывать значения с щелчком.

Существует очень быстрый и дешевый пример: https://jsfiddle.net/nosferatu79/p85rw6xz/

источник

2017-01-04 14:04:15

Как запустить $ ('. Button-collapse'). SideNav ('hide'); в vuejs 2 без jQuery?

ответ

Смежные вопросы