I'm trying to use JSX Spread Attributes on Vue ponent like below.

<script>

const
Square = p => <button class="square" v-on:click={ () => p.props.click( p.props.index ) }>{ p.props.squares[ p.props.index ] }</button>

const
Board = p => (
    <div>
        <Square squares={ p.props.squares } click={ p.props.click } index='0' />
        <Square { ...p.props } index='1' />
    </div>
)

export default {
    data    : () => ( { squares: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ] } )
,   render  ( h )   { return <Board squares={ this.squares } click={ this.handleClick } /> }
,   methods : {
        handleClick: i => console.log( i )
    }
}
</script>

This line is OK:

<Square squares={ p.props.squares } click={ p.props.click } index='0' />

But this line seems to fail to pass properties from 'Board' to 'Square'

<Square { ...p.props } index='1' />

Please help me. Thanks in advance.

I'm trying to use JSX Spread Attributes on Vue ponent like below.

<script>

const
Square = p => <button class="square" v-on:click={ () => p.props.click( p.props.index ) }>{ p.props.squares[ p.props.index ] }</button>

const
Board = p => (
    <div>
        <Square squares={ p.props.squares } click={ p.props.click } index='0' />
        <Square { ...p.props } index='1' />
    </div>
)

export default {
    data    : () => ( { squares: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ] } )
,   render  ( h )   { return <Board squares={ this.squares } click={ this.handleClick } /> }
,   methods : {
        handleClick: i => console.log( i )
    }
}
</script>

This line is OK:

<Square squares={ p.props.squares } click={ p.props.click } index='0' />

But this line seems to fail to pass properties from 'Board' to 'Square'

<Square { ...p.props } index='1' />

Please help me. Thanks in advance.

• javascript
• vue.js
• attributes
• jsx
• spread-syntax

Share Improve this question Follow edited Mar 22, 2019 at 15:52 Patrick Roberts 52.1k1010 gold badges117117 silver badges163163 bronze badges asked Mar 16, 2019 at 6:47 SatachitoSatachito 5,8883838 silver badges4343 bronze badges 2

• 1 Coming from react, I never understand the value of spreading the props. Even using flow/typescript you still had to dig to find out what's actually being passed and where a collision is. But to answer your question, vue uses babel sugar syntax in order to bind properties. You can't spread them on SFCs, but you can using render ponents. – Ohgodwhy Commented Mar 16, 2019 at 7:23
• Thanks for your suggestion. I moved my code into js part of the project but still not able to find any glue. I will struggle more. Thanks! – Satachito Commented Mar 16, 2019 at 9:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Maybe you can do like this

<Square { ...{props: p.props} } index='1' />

After reading https://github./vuejs/jsx#attributesprops, I think it could works.