VueJS Material.io Связывание переменной компонента Drawer - PullRequest
Новая
       29

VueJS Material.io Связывание переменной компонента Drawer

0 голосов
/ 31 мая 2018

В настоящее время я изучаю VueJS и работаю с http://vuematerial.io.

Я создал приложение с несколькими страницами - каждая из них содержит боковую панель (компонент ящика https://vuematerial.io/components/drawer).

Поскольку я не хочу копировать и вставлять один и тот же код компонента ящика на каждой странице, я просто хочу создать один компонент боковой панели, который я затем импортирую на каждую страницу.

Пока все хорошо.

Это работает нормально.

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

Позвольте мне показать вам текущийновый код, чтобы прояснить, в чем проблема:

Итак, это компонент страницы: 

<md-toolbar class="md-primary">
    <md-button class="md-icon-button" @click="showSidebar=true">
        <md-icon>menu</md-icon>
    </md-button><span class="md-title">Dashboard</span>
</md-toolbar>
<Sidebar v-bind:showSidebar="showSidebar"></Sidebar>

Итак, это структура Vue, как вы видите, я хочу связать свойство showSidebar.как яреализуя его на странице 

import Sidebar from './sidebar.vue';
export default {
    data: function () {
        return {
            showSidebar: false
        }
    },
    components: {
        Sidebar: Sidebar
    },

А теперь сам компонент боковой панели: 

<md-drawer v-bind:md-active.sync="showSidebar">

Затем компонент боковой панели извлекает значение для свойства, подобного этому: 

export default {
    name: 'sidebar',
    props: ['showSidebar'],

И это похоже на работу!Я могу нажать на кнопку меню на странице, установить для свойства значение true - и на боковой панели появится!Большой!Но .. Когда я нажимаю за пределами этой боковой панели, появляется это предупреждающее сообщение - и, более того - я не могу открыть его снова при новом щелчке.Он закрывается, но я не могу открыть его снова, пока я полностью не перезагружу страницу.

Как я могу решить это?Я также думал об использовании событий, так как компонент «выдвижного ящика», кажется, прослушивает события, но я не добился успеха.Вот текущий код компонента ящика: https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDrawer/MdDrawer.vue

Надеюсь, было понятно, в чем моя проблема.

Надеюсь, любой может мне помочь.

Это мой первый вопрос здесь - пожалуйста, будьте любезны:)

/ РЕДАКТИРОВАТЬ: Оппс, вот предупреждение:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "showSidebar"

1 Ответ

0 голосов
/ 01 июня 2018

Я не профессионал Vue - все еще учусь сам - но я думаю, что могу видеть, что здесь происходит.

Я думаю, что предупреждение, в частности, потому что у вас есть реквизит И свойство данныхс таким же именем.Попробуйте удалить настройки данных.Вы можете изменить настройку реквизита так: 

props: {
    showSidebar: {
        type: Boolean,
        default: false
    }
}

Посмотрите, исправит ли это.Кроме того, учитывая, как вы, кажется, используете это, я бы посоветовал изучить Vuex.Документация хорошая, и она действительно может помочь в управлении вашим приложением.Возможно, даже исправить эту проблему, открыв ящик.

Редактировать:

После более внимательного изучения кода этого пользователя (связанного с ним на разногласиях) я обнаружил, что проблема заключается в том, что пока процессоткрытие боковой панели осуществлялось с помощью свойства родительского компонента, действие закрытия которого строго выполнялось в дочернем элементе.Когда у вас есть данные, привязанные таким образом от родителя к потомку, вы должны обязательно обновить источник (родительский компонент) соответствующих изменений.В Vue эти изменения проталкиваются только в одном направлении.Чтобы передать информацию до родителя, вам нужно $ .emit events.

Моя текущая рекомендация - добавить пользовательское событие в тег боковой панели родительского компонента:

<Sidebar v-bind:showSidebar="showSidebar" v-on:hide-sidebar="showSidebar=false"></Sidebar>

А затем измените тег закрытия в дочернем компоненте следующим образом:

<span class="md-title" @click="$emit('hide-sidebar')">FleaMaster</span>

Надеемся, что эта информация также поможет кому-то еще!

...