2

I have made an example in Codesandbox

Is there a way to collapse the sidebar by clicking on the button 'Col-2'. The button 'Col-1' is working fine, but it's necessary that is works by clicking on 'Col-2'.

I've tried to call the collapsedButton but this didn't work.

<script> export default { name: 'template', methods: { setCollapsed () { this.collapsed = !this.collapsed }, collapseButton () { this.$emit('setCollapsed') this.collapsed = !this.collapsed } } } </script>

Can someone help me out with this?

Improve this question
2
  • Components states are isolated. If a component is another "branch" needs access to the state of an unreachable component, you'll likely need a state management library like pinia. Your collasped boolean will be shared across all components so you can control it from wherever you want :) Commented Jan 6, 2023 at 16:14
  • I think you're asking the wrong question. Even if you were calling the exact same method, the header isn't going to collapse. You can set collapsed = true in your header just the same as the sidebar with a duplicate method, but there's no classes or CSS that would apply to the header that would make it collapse... at least according to the code you've written in your sandbox Commented Jan 6, 2023 at 16:34

2 Answers 2

Reset to default
1

You should make collapsed a prop and control it from the parent component. You'll need to listen for the event (this.$emit('setCollapsed')) in the parent component and update collapsed accordingly.

I hope this helps, good luck!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

The recommended way to achieve this is to use a store.

The store is a module, external to any component, which can be imported in any number of components. When the state of the store (which is pretty much like the data function of a component) is changed, the change is propagated in every single component where the store is used.

Since you're using Vue 2, you could use a mixin.

Here's a mixin using a basic version of a store, under the hood: https://codesandbox.io/s/vue-forked-tz1yox?file=/src/components/sidebar.vue

In more detail, it uses a reactive object which serves as shared state for sidebar's collapsed status while exposing a writable computed (collapsed) and a toggleSidebar method.

Using the mixin in any component is the equivalent of writing the writable computed and the method into the component.

Note: mixins don't play nice with TypeScript. But the above solution doesn't need a mixin. I only used one so I didn't have to write the same computed and same method in both components.
The key to it working is the shared/external reactive object. In Vue 3 you would achieve this using Composition API.

Improve this answer

1 Comment

@Wilco-S, in that case, consider marking it as the accepted answer, to let future users know it answered your question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.