Direct parent-child refs in Accordion and Panel break reusability about vue-strap HOT 6 OPEN

Some things to take in mind first:

• You're working with vue 1 or 2 ?
  My master is based on vue 2: https://wffranco.github.io/vue-strap/
  if you're working with vue 1, use yuche version: http://yuche.github.io/vue-strap/

• To put a slot in a template tag maybe can cause problems... vue try to replace the slot in the component with this, and the template is not a DOM object like div or span, so maybe that can be part of your problem.

If this don't help you to solve the problem, try to replicate in a jsfiddle.
Some examples (just to help you to import vue & vue-strap files):

• example with vue1: https://jsfiddle.net/wffranco/goLmr7ty/
• example with vue2: https://jsfiddle.net/wffranco/yeqwj0gt/

from vue-strap.

You're working with vue 1 or 2 ?

I'm working with vue 2. I opened this issue on your fork because your fork represents the current vue 2 code. This issue doesn't exist with the vue 1 code.

To put a slot in a template tag maybe can cause problems... so maybe that can be part of your problem.

My problem is that the template logic in https://github.com/wffranco/vue-strap/blob/master/src/Panel.vue requires _isAccordion set to true in order to create the toggle attribute, and that it calls openChild on its $parent. I am not receiving any errors from vue itself.

If this don't help you to solve the problem, try to replicate in a jsfiddle.

As requested: https://jsfiddle.net/b13wu1bm/1/. Note that the accordions start open and are not toggleable.

As mentioned, I can fix this by adding:

  created: function() {
    return this._isAccordion = true;
  },
  methods: {
    openChild: function(child) {}
  },

to the metadata for RecursiveComponent: https://jsfiddle.net/qtrmto7y/, which demonstrates the issue is related to these functions.

Ideally, Accordion would listen for opens that occur in its Panels like they do in the Vue 1 code, instead of Panels directly toggling actions on their parent Accordions.

from vue-strap.

The accordion only work if the panel is directly inside a accordion... is that way to avoid the panel component have a weird behavior when you nest components.

The best solution is to put accordion and panel inside your recursive component, in that order.
Have 2 ways to solve your problem.

1- Your master element (name: "Food") must be a panel outside your component. This panel will not be an accordion.
2- Put your master element inside an array and that way this will be accordion too.

Here is your example working (option 2): https://jsfiddle.net/wffranco/b13wu1bm/2/

from vue-strap.

Hey @wffranco, thanks for getting back to me. Sorry for the delay.

You said:

The accordion only work if the panel is directly inside a accordion... is that way to avoid the panel component have a weird behavior when you nest components.

I agree that the panel currently has weird behavior when you nest it under custom components, for precisely the reasons I laid out in the initial description - panel directly calls methods on its $parent. I've found that other components within this repo actually do this as well. Per the Vue 2 docs, this is an anti-pattern:

Use $parent and $children sparingly - they mostly serve as an escape-hatch. Prefer using props and events for parent-child communication.

Regarding my particular issue, you said:

The best solution is to put accordion and panel inside your recursive component, in that order.
Have 2 ways to solve your problem.

Thank you for the examples! But they don't actually solve my issue, because the panel needs to be the root element of my custom component. See the second example in my initial comment, especially the paragraph underneath:

It's clear to me that we're relying too heavily on the state of B to render its surrounding markup in A's template.

This specific issue is just one of several potentially caused by referring to $parent directly. All child-to-parent communication in Vue components should occur as events.

I'm happy to help refactor the areas that need to be changed, but I won't be able to start on it until late February.

from vue-strap.

Well, when I said The best solution I mean that is the fast way to solve it...

I said I avoid any weird behavior, but I don't really test nesting accordion & panel with other components, so I think I can make it work nested (using $children & $parent).

But I think is hard to handle nested parent-child communication with events & props when you don't know how deep inside is your child component. In vue1 had broadcast, but in vue2 was removed. If you have some idea how to do it, I invite you to fix it 😃

from vue-strap.

@wffranco Sorry for the delay. I do have some ideas how to fix it and will submit a PR as soon as I get some time to work on it.

from vue-strap.