How can I bind an array to a custom directive using Vue3's setup syntax sugar + tsx?

[Qiksy]

I have created a custom directive called v-hasPermi. The binding.value it accepts should be an array object.

It works fine with the pure Composition API, like this:
<button v-hasPermi="['mp:tag:delete','mp:tag:update']" />

However, it does not work in the tsx syntax:

<script lang="tsx" setup>
....
const button = () => <button v-hasPermi={['mp:tag:delete','mp:tag:update']} />
</script>

In this case, it only gets the string 'mp:tag:delete', without the subsequent 'mp:tag:update', and it is not an array.

However, both of the following methods work:

Method One

<script lang="tsx" setup>
....
const permiArray = ['mp:tag:delete','mp:tag:update']
const button = () => <button v-hasPermi={permiArray } />
</script>

Method Two

<script lang="tsx" setup>
....
const button = () => <button v-hasPermi={[ ['mp:tag:delete','mp:tag:update'] ] } />
</script>

I can understand why method one works, but why does method two with double square brackets also work normally?

---

Vue3 steup 语法糖 + tsx，应该如何绑定一个数组给某个自定义指令？

我自定义了一个v-hasPermi指令，它接受的binding.value需要是一个数组对象

他在单纯的组合式API可以使用，类似这样
<button v-hasPermi="['mp:tag:delete','mp:tag:update']" />

但是如果在tsx语法中，就会不生效

<script lang="tsx" setup>
....
const button = () => <button v-hasPermi={['mp:tag:delete','mp:tag:update']} />
</script>

此时获取的还是 字符串 'mp:tag:delete' , 没有后续的 'mp:tag:update' ，也不是一个数组

但是以下两种写法却可以实现
方法一

<script lang="tsx" setup>
....
const permiArray = ['mp:tag:delete','mp:tag:update']
const button = () => <button v-hasPermi={permiArray } />
</script>

方法二

<script lang="tsx" setup>
....
const button = () => <button v-hasPermi={[ ['mp:tag:delete','mp:tag:update'] ] } />
</script>

方法一我还能理解，但是为什么方法二的双中括号也可以正常运行？

[LinusBorg]

Inline array syntax is used to pass value, arg, and modifiers.

https://github.com/vuejs/babel-plugin-jsx?tab=readme-ov-file#custom-directive