problem with jsx spread operator and props passed to children components

[sotaan]

Here is my code:

export const _isComponent = (tab) => tab.hasOwnProperty('component')
export const _askedForPassedProps = (tab) => tab.hasOwnProperty('props')

const TabContentWrapper = {
  functional: true,

  name: "TabContentWrapper",

  props: {
    // tabs: {
    //   type: Array,
    //   required: true
    // },
    //
    // activeTab: {
    //   type: Number,
    //   required: true
    // },



  },

  render (h, context) {
    const props = context.data.attrs,
      tabs = props.tabs,
      activeTab = props["active-tab"],
      contents = tabs.map( (_tab, index) => {
        const isComponent = _isComponent(_tab),
          isShown = index === activeTab

          let askedProps = _askedForPassedProps(_tab) && _tab.props,
            finalProps = {}

          if (askedProps) {
            _.each(askedProps, (prop) => finalProps[prop] = props[prop])
          }
          const data = { 'props': finalProps }
          debugger
        return isComponent ?
          <_tab.component v-show={isShown} {...data}></_tab.component> :
          <router-view v-show={isShown} name={_tab.name} {...finalProps}></router-view>
      })

    return (
      <div class="tab-content">
        {contents}
      </div>
    )
  }
}

export default TabContentWrapper

None of the techniques used to inject props works 😢

[oknoorap]

I got the same problem.

[zacacollier]

I'm also experiencing this problem.

In this view, the spread operator works as expected:

import Posts from 'components/Posts'
import Profile from 'components/Profile'
import posts from '../../posts'

export default {
  name: 'Home',
  render (h) {
    // Set props to be passed here
    const data = {
      props: {
        posts: posts,
        msg: 'hola'
      }
    }
    return (
      <div class='page'>
        <Profile />
        <Posts {...data} />
      </div>
    )
  }
}

Then, in the child component Posts, I have to explicitly set props:

import Post from '../Post'

export default {
  name: 'Posts',
  props: {
    posts: Array,
    msg: String
  },
  render (h) {
    const data = {
      posts: this.posts
    }
    return (
      <div>
        {
          data.posts.map((post, index) =>
            <Post key={index}
              // {...post} doesn't work
              author={post.author}
              title={post.title}
              tags={post.tags}
              date={post.date}
            />
          )
        }
      </div>
    )
  }
}

Finally, the child component Post for reference. Even with props set within the render function, via data, the spread syntax won't work:

export default {
  name: 'Post',
  props: {
    author: String,
    date: String,
    tags: Array,
    title: String
  },
  render (h) {
    const data = {
      author: this.author,
      date: this.date,
      tags: this.tags,
      title: this.title
    }
    return (
      <div>
        <h1>{data.title}</h1>
        <h2>{data.author}</h2>
        <h3>{data.date}</h3>
        {data.tags.map((tag, i) => <h5 key={i}>{tag}</h5>)}
      </div>
    )
  }
}

[nickmessing]

If you experience the same problem check #86, will keep that ticket updated.