vue3循环里如何控制对应元素的隐藏与显示?

Question

<div v-for="(item,  i) in data" :key="i">
    <div v-for="(per,  j) in item" :key="j">
        <input v-if="show"></input>
        <button @onclick="showInput"></button>
    </div>
</div>

两层v-for，渲染了多组的input和button，如何点击button只控制对应input的显示与隐藏？
vue3的写法，铁子们，help

Answer 1

通过对应的index

Answer 2

如果是需要单独控制的话，最简单的方式就是为每一个 per 增加一个 show 的状态，如下 demo 即可

<div v-for="(item,  i) in data" :key="i">
    <div v-for="(per,  j) in item" :key="j">
        <input v-if="per.show"></input>
        <button @click="per.show = !per.show"></button>
    </div>
</div>