Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vnode props can't be accessed from parent #1186

Closed
lzhoucs opened this issue May 15, 2020 · 4 comments
Closed

vnode props can't be accessed from parent #1186

lzhoucs opened this issue May 15, 2020 · 4 comments

Comments

@lzhoucs
Copy link

lzhoucs commented May 15, 2020

Version

3.0.0-beta.12

Reproduction link(either one of the following)

Steps to reproduce

  • Go to one of the reproduction links above(neither works as expected)
  • Click on one of the two tabs
  • Check console log

What is expected?

true/false is logged

What is actually happening?

undefined is logged


I need to access Tab's active prop inside Tabs, I found no way to do it. This ticket is similar to #1082. The only difference is this ticket has issue getting child vnode props from parent whereas #1082 had issue setting it.

In both reproduction links, the console.log(vnode.props.active) shows undefined when either tab is clicked, even though vnode.props.active can be set properly from parent now that #1082 is fixed

@underfin
Copy link
Member

underfin commented May 15, 2020

const active = vnode.props.href === props.modelValue
          const wasActive = vnode.props.active// it is origin vnode props. it hasn't active props.
          console.log(vnode.props.href, wasActive)
                    console.log(vnode.props.href, active) // it  will be expect to you.

          return Vue.cloneVNode(vnode, {
            onActivate(newHref) {
              emit("update:modelValue", newHref);
            },
            active// change origin vnode props. add active props.
          });
        });

Please read the code comment, hope help to you.

@lzhoucs
Copy link
Author

lzhoucs commented May 15, 2020

Thanks @underfin . I intentionally have two variables: active is for the new value, wasActive is for the current value before being updated by the new value. setting active works, however getting wasActive doesn't. Your following comment makes sense:

const wasActive = vnode.props.active// it is origin vnode props. it hasn't active props.

However it only makes sense in cloneVNode example where new vnode are created and returned. in mergeProps example, there is only one copy vnodes ever being updated and returned.

@underfin
Copy link
Member

  const children = slots.default ? slots.default() : [] 

For every update will create new children, and each of the new child never has active props.

@lzhoucs
Copy link
Author

lzhoucs commented May 16, 2020

Thanks @underfin . I realized that as well after I replied. I made a change and it now works. Not sure if it is good practice or not, but it works: https://codepen.io/lzhoucs/pen/jObeqvb

Close the ticket since there's no bug to fix but a mistake on my side.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants