Как дать реквизиту параметр vue?

Question

Поэтому я пытаюсь использовать vue-sidebar-menu и выяснить, как передать аргументы для реквизитов, которые он дает.Я пробовал множество разных способов, но не могу найти тот, который позволил бы мне свернуть панель навигации при загрузке страницы.Существует свойство, которое называется свернутым, однако я не могу понять, как передать его этой подпорке, когда страница загружена для сохранения свернутой панели навигации.

Некоторые шаблоны выглядят так:

export default {
  name: 'SidebarMenu',
  components: {
    Item,
    SubItem,
    MobileItem
  },
  props: {
    menu: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '350px'
    },
    widthCollapsed: {
      type: String,
      default: '50px'
    }

При этом мой код для реализации панели навигации выглядит следующим образом

<template>
  <sidebar-menu :menu="menu" />
</template>

<script>
  export default {
    data () {
      return {
        collapsed: true,
        menu: [
          {
            header: true,
            title: 'Main Navigation'
            // component: componentName
            // visibleOnCollapse: true
          },
          {
            href: '/',
            title: 'Dashboard',
            icon: 'fa fa-user'
            /*
            disabled: true
            badge: {
            text: 'new',
            // class:''
          }
          */
          },
          {
            title: 'Other',
            icon: 'fa fa-chart-area',
            child: [
              {
                href: '/charts/sublink',
                title: 'Sub Link'
              }
            ]
          }
        ]
      }
    }
  }
</script>

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

Answer 1

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

реквизит collapsed принимает логическое значение.ваш родительский компонент будет выглядеть так:

<template>
  <sidebar-menu :menu="menu" :collapsed="myCollapse"/>
</template>
<script>
  export default{
    data(){
      return {
        myCollapse:false
      }
    }
  }
</script>

тогда, каждый раз, когда вы изменяете свое собственное свойство mycollapse, компонент бокового меню будет реагировать на это изменение.

Answer 2

В этом случае вам нужно будет передать свернутое значение как опору в боковое меню-меню

<sidebar-menu :menu="menu" :collapsed="collapsed"/>

, если это не поможет добавить еще немного кода, чтобы сделать пример более понятным.