Can I use spread syntax(...) in vue.js 2.x template?-CodePudding

Can I use something like this in vue.js template?

<template>
  <vxe-table>
    <vxe-column
      v-for="options in someConsts"
      ...options
      width="160">
    </vxe-column>
  </vxe-table>
</template>

like in React.js, where options may be something like {title: 'ColName', width: 160, formatter: ...}.

I did this, but got

Failed to execute 'setAttribute' on 'Element': '...options' is not a valid attribute name.

CodePudding user response：

You can check 15. Stealing Prop Types from here.

One thing to keep in mind is that you're not in a JSX realm anymore here.
As for your edit, ...options by itself doesn't make sense.
Meanwhile, :options="options" is a valid yet simple approach (the right part of options can totally contain a ...rest of course).

Be careful of not drilling the state too hard tho.
provide/inject is also a viable solution overall.
As for the exact syntax, I recommend reading the official doc to get it right.

The main difference here, is that xve-column is not an object as in React, more of a web component syntax. Expecting a key/pair value like width in your case.

Also, give a try to v-bind="$props" as explained here.